前言:自己很容易混淆和忘记form表单一些参数提交的规则,相信大家也是如此,特此写了一个测试页面。做一个说明性文档。
一、准备一个页面,写一个form,提供N个表单元素。样子如下。
<form id="form1" action="https://www.baidu.com" method="post">
<input type="text" value="1">
<input type="text" name="disabled" disabled="disabled" value="my_is_disabled">
<input type="text" name="username1" value="1">
<input type="text" name="username1" value="1">
<input type="text" name="username1" value="1">
<input type="text" name="username2" value="1">
<input type="text" name="password" value="1">
<input type="radio" name="radio" value="1" checked="checked">
<input type="radio" name="radio" value="0">
<input type="checkbox" name="checkbox_no_check" value="1">
<input type="checkbox" name="checkbox_check" checked="checked" value="1">
<select name="select_hasValue">
<option value="value1">text1</option>
<option value="value2">text2</option>
</select>
<select name="select_hasNotValue">
<option >text1</option>
<option >text2</option>
</select>
<input type="submit" value="提交">
</form>
从上面测试了没有名字的是否提交,disabled是否提交,没选中的是否提交,select的提交规则,以及多个同名的表单是怎么提交的。
直接发结果:
get: <!-- ?username1=1&username1=1&username1=1&username2=1&password=1&radio=1&
checkbox_check=1&select_hasValue=value1&select_hasNotValue=text1-->
post :
从上面,我们得出结论:
1、每一个表单会提交一个key=value ,同名会提交多个。
2、没有带name的表单不会提交.disable的表单不会提交.
3、radio多个name同名的话,可以联动,并只提交一个。radio,checkbox如果没有选中不会提交.
4、select 会默认选择第一个,如何重置select,可以采用内置属性 xx.prop("selectIndex",0),
细节:select 当选中的option没有value时,会把内部的文本提交。
二、form表单的序列化。
因为很多时候,我们不是直接提交form表单,异步提交的情况比较多,这个时候,我们会选择表单序列化。下面看下jquery以及其衍生出的三个序列化方法。
$.fn.serializeJson=function(){
var serializeObj={};
var array=this.serializeArray();
var str=this.serialize();
$(array).each(function(){
if(serializeObj[this.name]){ //如果属性已经存在
if($.isArray(serializeObj[this.name])){
serializeObj[this.name].push(this.value); //已经有此数组,添加数据即可
}else{
serializeObj[this.name]=[serializeObj[this.name],this.value];//变成数组,并添加当前遍历的value
}
}else{
serializeObj[this.name]=this.value;//普通赋值。
}
});
return serializeObj;
};
/*** 二、表单序列化: **/
var data1 = $("#form1").serialize(); //序列化参数拼接的字符串
var data2 = $("#form1").serializeArray(); //序列化数组
var data3 = $("#form1").serializeJson(); //序列化json
console.log(data1); // 等于提交的 querySearch 格式: username="xx"&password="xx" //最常用
console.log(data2); // 格式: [{name:"username",value:"??"},{name:"password,value:"??"},{}] //一般不用。
console.log(data3); // 转成json格式。 //适用于需要参数为json格式的方法。
备注:同表单提交规则,不会提交的表单元素,也不会进行序列化!!!!!