提交form表单方法

ajax提交form表单，这在日常项目中是经常用到的。前台无论是简单的html、jsp或者使用了easyui框架，只要是提交表单一般都会使用到ajax。

ajax提交表单分为两种：

1、无返回结果的，就是把表单数据直接提交给后台，让后台直接处理；

最简单的就是$(“#formid”).submit();直接将form表单提交到后台。

2、返回有结果的，这种情况下，后台不管是执行成功还是失败，最终的信息都需要返回到前台。

第二种是使用最多的一种，因为程序的执行成功与否都需要给用户提示，程序一般也都是多步完成的，执行完插入操作，需要发起流程，这就需要在界面上判断成功与否。ajax本身属于有返回结果的一类，其中的success方法就是处理后台返回结果的。

一、ajax提交表单有返回结果的有两种实现方式

（1）ajax提交（另外有jQuery提交，js提交, submit提交）

<form id="myform" name="myform" method="post" onsubmit="return sumbitTest();" action="RegisterAction.action"><table><tr><td>姓名:</td><td> <input type="text" name="name" /> </td></tr><tr><td>性别:</td><td><input type="radio" name="sex" value="1"> 男<input type="radio" name="sex" value="0"> 女</td></tr><tr><td>年龄:</td><td><select name="age"><option value="20">20</option><option value="21">21</option><option value="22">22</option></select></td></tr><tr><td colspan="2"><input type="submit" value="Submit普通提交"><input type="button" id="ajaxBtn" value="AJAX提交" /><input type="button" id="jqueryBtn" value="jQuery提交" /><input type="button" id="jsBtn" value="JS提交" /><input type="submit" value="onSubmit提交" onclick="return check(this.form)"/></td></tr></table>
</form>

<script type="text/javascript">$(function() {//ajax提交$("#ajaxBtn").click(function() {var params = $("#myform").serialize();$.ajax( {type : "POST",url : "RegisterAction.action",data : params,success : function(msg) {alert("success: " + msg);}});})//jQuery提交$("#jqueryBtn").click(function(){$("#myform").submit();})//js提交 $("#jsBtn").click(function(){document.myform.action="RegisterAction.action";   document.myform.submit();   })//submit按钮提交function check(form) {if(form.(name).value=='') {alert("请输入用户帐号!");form.userId.focus();return false;}if(form.(name).value==''){alert("请输入登录密码!");form.password.focus();return false;}document.myform.submit();}})function sumbitTest(){return true; //return false则不会提交 }
</script>

jQuery的serialize()方法通过序列化表单值，创建URL编码文本字符串，我们就可以选择一个或多个表单元素，也可以直接选择form将其序列化，如：(name 属性需要填写)

可以把序列化的值传给ajax()作为url的参数，轻松使用ajax()提交form表单了，而不需要一个一个获取表单中的值然后传给ajax()，举例如下：

后台如果接收值为null，把contentType: "application/json"去掉（content-Type定义的是发送至服务器的数据类型,data-Type定义的是服务器返回的数据）

$("#form1"). serialize()后台获取不到表单中属性为disabled的元素的值的解决办法

当属性设置为"disabled"时，提交表单时，select的值无法传递，提交前移除disabled属性$("#conferenceType").removeAttr("disabled"); 即可

submit提交：

在form标签中添加Action(提交的地址)和method(post),且有一个submit按钮（<input type=’submit’>）就可以进行数据的提交，每一个input标签都需要有一个name属性，才能进行提交。当点击submit按钮时，触发onclick事件，由JavaScript里函数判断输入内容是否为空，如果为空，返回false, 不提交，如果不为空，提交到由action指定的地址。

这种默认的提交方式，一般会进行页面的跳转(不成功时跳转到当前页面)。而有时候我们是对弹出框进行数据提交的，希望提交成功则关闭弹出框并刷选父页面，失败则提示失败原因，且弹出框不关闭。此时可以采用Ajax进行数据提交.

（2）通过窗口查找form提交

<span style="font-size:18px;">
// 提交表单  var obj = document.getElementById("xx_iframe").contentWindow;  obj.$("#yourform").form("submit",{  success :function(data){  //对结果处理  }    });</span>

因为在当前界面上弹出对话框，然后在对话框上的按钮触发对话框中表单提交，对话框又是链接的另外的html页面，如此通过$(“#formid”)的方式是找不到对话框中的form的，因此这种情况下只能使用这种方式提交表单。

另外ajax中封装的get,post请求也都属于有返回结果的一类。

总的来说，无返回结果的和有返回结果的(将form表单数据序列化+通过窗口实现form提交)，form表单都必须要有name属性。

二、form表单提交与 ajax提交的区别