天天看点

form表单的提交参数规则,以及jquery序列化表单的方法

    前言:自己很容易混淆和忘记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 : 

form表单的提交参数规则,以及jquery序列化表单的方法

  从上面,我们得出结论:

              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格式的方法。

          备注:同表单提交规则,不会提交的表单元素,也不会进行序列化!!!!!

继续阅读