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 : 

    

  从上面,我们得出结论:

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

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

  • 4
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值