表单序列化

2019独角兽企业重金招聘Python工程师标准>>>

1.serialize()

serialize()方法通过序列化表单值，创建URL编码文本字符串。他的操作对象是代表表单元素集合的jquery对象,不过也可以针对个别的表单元素进行序列化

表单元素得几种类型：<input> <textarea> <select>

表单序列化：

表单个别元素序列化

serialize()序列化汉字会是乱码

原因：serialize()自动调用了encodeURIComponent()方法，将数据编码了

解决办法：调用decodeURIComponent()方法将数据解码

例如:

<script type="text/javascript">
    $(document).ready(function(){
       $("#btnSubmit").click(function(){
          var serializeVal=$("#formDataSubmit").serialize();
          // 将序列化表单解码
          serializeVal=decodeURIComponent(serializeVal,true);
          console.log("表单元素序列化输出的值------------");
          console.log(serializeVal);
       });

    });
</script>

输出结果截图：

汉字不再是乱码了

注意：使用序列化时，必须给要序列化的字段加上name属性

2.serializeArray()

序列化后创建的是对象数组(名称和值)，返回JSON数据结构

注意：此方法返回的是 JSON 对象而非 JSON 字符串。

返回的 JSON 对象是由一个对象数组组成的，其中每个对象包含一个或两个名值对 —— name 参数和 value 参数（如果 value 不为空的话）。举例来说：

[ 
  {name: 'firstname', value: 'Hello'}, 
  {name: 'lastname', value: 'World'},
  {name: 'alias'}, // 值为空
]

注意：禁用的元素不会被序列化，文件选择的元素也不会被序列化

序列化的代码：

<script type="text/javascript">
    $(document).ready(function(){
        $("#btnSubmit").click(function(){
            //表单序列化数组
            var serializeVal=$("#formDataSubmit").serializeArray();
            console.log("表单元素序列化数组输出的值------------");
            console.log(serializeVal);
         });
    });
</script>

序列化输出的结果：

由上面代码和效果图可以看到不需要编码和解码

遍历输出属性和值可以用以下方法

console.log("遍历数组输出的值------------");
$.each(serializeVal,function(i,file){
    console.log("name:"+file.name+",value:"+file.value);
})

效果图如下：

3.serializeObj()

序列化后创建的是对象，jquery本身是没有这个方法的，我自己封装的一个

代码如下：

$.prototype.serializeObj=function(){
    var arr=this.serializeArray();
    var obj={};
    $.each(arr,function(index,file){
        if(!(file.name in obj)){
           obj[file.name]=file.value;
        }
     });
    return obj;
}

效果图如下：

注意：当序列化表单中出现多个相同的name时，serializeObj只会取到第一个name

单选按钮时：相同的name，获取的是checked的那个按钮值

多选按钮时：相同的name，获取的是第一个的checked的那个按钮值

代码如下

<form id="formDataSubmit" name="formDataSubmit">
      <div>
         <label>姓名</label>
         <input type="text" name="userName" class="userName">
      </div>
      <div>
         <label>年龄</label>
         <input type="text" name="age">
      </div>
      <div>
         <label>职业</label>
         <input type="text" name="occupation">
      </div> 
      <div>
         <label>性别</label>
         <input type="radio" name="sex" id="sex" value="男">
         <label>男</label>
         <input type="radio" name="sex" id="sex" value="女">
         <label>女</label>
      </div> 
      <div>
         <label>爱好</label>
         <input type="checkbox" name="checkbox" value="游泳">
         <label>游泳</label>
         <input type="checkbox" name="checkbox"  value="拳击">
         <label>拳击</label>
         <input type="checkbox" name="checkbox"  value="打篮球">
         <label>打篮球</label>
         <input type="checkbox" name="checkbox"  value="踢足球">
         <label>踢足球</label>
      </div> 
   </form>

效果图：

以一下代码为例来总结下三种形式的区别

<form id="formDataSubmit" name="formDataSubmit">
      <div>
         <label>姓名</label>
         <input type="text" name="userName" class="userName">
      </div>
      <div>
         <label>年龄</label>
         <input type="text" name="age">
      </div>
      <div>
         <label>职业</label>
         <input type="text" name="occupation">
      </div> 
      <div>
         <label>性别</label>
         <input type="radio" name="sex" id="sex" value="男">
         <label>男</label>
         <input type="radio" name="sex" id="sex" value="女">
         <label>女</label>
      </div> 
      <div>
         <label>爱好</label>
         <input type="checkbox" name="checkbox" value="游泳">
         <label>游泳</label>
         <input type="checkbox" name="checkbox"  value="拳击">
         <label>拳击</label>
         <input type="checkbox" name="checkbox"  value="打篮球">
         <label>打篮球</label>
         <input type="checkbox" name="checkbox"  value="踢足球">
         <label>踢足球</label>
      </div> 
   </form>

区别：

4.serialize-object.js

是一款表单序列化的插件，本人也用于开发中过，兼容性也还不错，附上链接地址

http://www.sucainiu.com/serialize-object.html

转载于:https://my.oschina.net/u/3680343/blog/1590396