提交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提交的区别