Ajax提交Form表单的两种简单方式

在现在的项目开发中，ajax的应用是必不可免的，最为基本的就是利用ajax的异步处理方式来向后台提交数据。关于ajax提交表单我利用到了两种简单的方式。

方法一##

先获取表单里面的数据，再通过ajax提交；下面上代码：

1,HTML代码

<form id="myformz" action="" method="post"> 用户名<input type="text" id="mobile" name="mobile"> 密码<input type="text" id="passwd" name="passwd"> <input type="button" onClick="sbum();"> </form>

2,JS代码

<script type="text/javascript"> function sbum() { var mobile = $("#mobile").val();//得到表单里的用户名 var passwd = $("#passwd").val();//得到表单里的密码 $.ajax({ url : "loginController/texts2.do",//后台地址 type : "POST",//提交方式 data : { "mobile" : mobile,//表单参数 "passwd" : passwd//表单参数 }, success : function(data) { alert("请求成功"); }, erreo : function(request) { alert("请求失败"); } }); } </script>

方法二##

把表单里面的数据序列化，再通过ajax提交：

1,HTML代码

<form id="myformz" action="" method="post"> 用户名<input type="text" id="mobile" name="mobile"> 密码<input type="text" id="passwd" name="passwd"> <input type="button" onClick="sbum();"> </form>

2,JS代码

<script type="text/javascript"> function subm() { $.ajax({ type : "POST",//提交方式 url : "loginController/texts.do",//提交地址 data : $("#myformz").serialize(),//序列化表单值，创建 URL 编码文本字符串。 success : function(data) { alert("请求成功"); }, erreo : function(request) { alert("请求失败"); } }); } </script>

##总结## 方法一的下面这种方式

var mobile = $("#mobile").val();//得到表单里的用户名 var passwd = $("#passwd").val();//得到表单里的密码

需要一个一个的获取表单里面的数据，这样的话相对于来是比较麻烦，如果数据太多则会非常麻烦，当然，这种方式会比较灵活； 方法二则会简单得多。 当然还有很多方法，这里就简单介绍了我最常用的两种简单方式。