使用ajax方法实现form表单的提交(附源码)

时间：2022-11-11 15:58:02

作者：13

GitHub：https://github.com/ZHENFENG13

版权声明：本文为原创文章，未经允许不得转载。

写在前面的话

在使用form表单的时候,一旦点击提交触发submit事件，一般会使得页面跳转，页面间的跳转等行为的控制权往往在后端，后端会控制页面的跳转及数据传递，但是在某些时候不希望页面跳转，或者说想要将控制权放在前端，通过js来操作页面的跳转或者数据变化。

一般这种异步的操作，我们都会想到ajax方式，因此在实现了功能后就整理了这篇文章，通过ajax方法实现form表单的提交并进行后续的异步操作。

常见的form表单提交方式

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

    <title>login test</title>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta http-equiv="pragma" content="no-cache">

    <meta http-equiv="cache-control" content="no-cache">

    <meta http-equiv="expires" content="0">

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <meta http-equiv="description" content="login test">

</head>

<body>

<div id="form-div">

    <form id="form1" action="/users/login" method="post">

        <p>用户名：<input name="userName" type="text" id="txtUserName" tabindex="1" size="15" value=""/></p>

        <p>密　码：<input name="password" type="password" id="TextBox2" tabindex="2" size="16" value=""/></p>

        <p><input type="submit" value="登录">&nbsp<input type="reset" value="重置"></p>

    </form>

</div>

</body>

</html>

点击登录按钮后，即触发form表单的提交事件，数据传输至后端，由后端控制页面跳转和数据。

ajax实现form提交方式

修改完成后代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

    <title>login test</title>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta http-equiv="pragma" content="no-cache">

    <meta http-equiv="cache-control" content="no-cache">

    <meta http-equiv="expires" content="0">

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <meta http-equiv="description" content="ajax方式">

    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

    <script type="text/javascript">

        function login() {

            $.ajax({

            //几个参数需要注意一下

                type: "POST",//方法类型

                dataType: "json",//预期服务器返回的数据类型

                url: "/users/login" ,//url

                data: $('#form1').serialize(),

                success: function (result) {

                    console.log(result);//打印服务端返回的数据(调试用)

                    if (result.resultCode == 200) {

                        alert("SUCCESS");

                    }

                    ;

                },

                error : function() {

                    alert("异常！");

                }

            });

        }

    </script>

</head>

<body>

<div id="form-div">

    <form id="form1" onsubmit="return false" action="##" method="post">

        <p>用户名：<input name="userName" type="text" id="txtUserName" tabindex="1" size="15" value=""/></p>

        <p>密　码：<input name="password" type="password" id="TextBox2" tabindex="2" size="16" value=""/></p>

        <p><input type="button" value="登录" onclick="login()">&nbsp;<input type="reset" value="重置"></p>

    </form>

</div>

</body>

</html>

注意事项

  • 在常用方式中，点击的登录按钮的type为"submit"类型；
  • 在常用方式中，form的action不为空；
  • ajax方式中需要注意的是$.ajax方法中的参数：dataType和data。

我平时很少写前端代码，级别也就是入门级别，能看懂能改而已，所以很多时候都是百度，像这次这个功能的实现也是借助了百度，但是，我百度到的代码在$.ajax方法中设置的dataType参数值为"html"而不是"json"，导致我在一开始调试的时候一直报错，最终是改成了"json"才成功，因此在这里特别说明并提醒一下，别和我一样走错了路，还有就是向服务端传输的data值了，像上面代码一样，将form表单中的数据序列化传输即可。

结语

推荐一下自己的达人课，感兴趣的朋友可以看一下：SSM搭建精美实用的管理系统

使用ajax方法实现form表单的提交(附源码)

首发于我的个人博客，新的项目演示地址：perfect-ssm，用户名：admin,密码：123456。

使用ajax方法实现form表单的提交(附源码)

如果有问题或者有一些好的创意，欢迎给我留言，也感谢向我指出项目中存在问题的朋友。

如果你想继续了解该项目可以查看整个系列文章Spring+SpringMVC+MyBatis+easyUI整合系列文章,也可以到我的GitHub仓库或者开源中国代码仓库中查看源码及项目文档。

使用ajax方法实现form表单的提交(附源码)的更多相关文章

  1. 使用ajax方法实现form表单的提交

    作者:13 GitHub:https://github.com/ZHENFENG13 版权声明:本文为原创文章,未经允许不得转载. 写在前面的话 在使用form表单的时候,一旦点击提交触发submit ...

  2. 利用 ajax自定义Form表单的提交方式

    需求场景:有时候单纯的form表单无法向后端传递额外的参数 比如需要action传递js异步生成的参数 ,form表单默认的action就无法满足需求,这时就需要我们自定义form表单的提交方式. h ...

  3. 基于form表单submit提交不跳转

    方法一:target <html> <body> <form action="" method="post" target=&qu ...

  4. form表单的提交方式

    开发中表单提交是很常见的,表单的提交方式也多种方式. 1.使用submit按钮提交表单  <input type="submit"/> <!DOCTYPE htm ...

  5. JavaWeb学习总结（十一）：Session解决form表单重复提交

    在平时开发中,如果网速比较慢的情况下,用户提交表单后,发现服务器半天都没有响应,那么用户可能会以为是自己没有提交表单,就会再点击提交按钮重复提交表单,我们在开发中必须防止表单重复提交. 一.表单重复提 ...

  6. JavaScript 创建一个 form 表单并提交

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...

  7. form表单js提交

    form表单js提交      $('#form1').submit(); 延迟form表单提交 function submitcheck() { $('#light').css('display', ...

  8. 微信自带浏览器不支持form表单post提交方案解决

      微信自带浏览器form表单post提交,Java控制后台获取不到值得解决方案: 第一种:把post改成get请求,但是改后另一个问题来了就是,数据不安全了,连接上都能看到,导致数据会流失,Java ...

  9. jqPaginator分页（ajax用法和form表单提交用法）

    一般使用方法 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UT ...

随机推荐

  1. C&num;基础-事件 继承类无法直接引发基类的事件

    An event can be raised only from the declaration space in which it is declared. Therefore, a class c ...

  2. kernel&sol;dma&period;c

    /* $Id: dma.c,v 1.5 1992/11/18 02:49:05 root Exp root $ * linux/kernel/dma.c: A DMA channel allocato ...

  3. 利用decorator和descriptor进行数据缓存

    class cached_property(object): def __init__(self, func, name=None, doc=None): self.__name__ = name o ...

  4. vlookup使用案例

    http://www.360doc.com/content/13/1119/20/9842991_330586745.shtml

  5. MFC断点无效

    方法1: 将出问题的CPP文件用系统记事本notepad打开,然后另存时选择unicode编码保存,覆盖掉原来的文件即可.一般这种方法一般会解决VS断点无法设定的80%问题.没有办法才请出第2种方法. ...

  6. MyBatis --- 动态SQL、缓存机制

    有的时候需要根据要查询的参数动态的拼接SQL语句 常用标签: - if:字符判断 - choose[when...otherwise]:分支选择 - trim[where,set]:字符串截取,其中w ...

  7. 如何使用RedisTemplate访问Redis数据结构

    RedisTemplate介绍 spring封装了RedisTemplate对象来进行对redis的各种操作,它支持所有的 redis 原生的api. RedisTemplate在spring代码中的 ...

  8. Jquyer table 中的数据分页

    直接上代码,复制出来就可以使用 <!DOCTYPE html> <html> <head lang="en"> <meta charset ...

  9. ajax冲刺03

    ---恢复内容开始--- 1.jq中ajax封装 简单的$.ajax方法使用示例:请关注 传参类型及数据 <!DOCTYPE html> <html lang="en&qu ...

  10. android studio java&colon; -source 1&period;6 中不支持 switch 中存在字符串 的错误

    F4打开open moudle setting 将source Compatibility 改为1.7 F4打开open moudle setting 将targetCompatibility 改为1 ...

相关文章