serializeArray()与serialize()的区别

简介:
复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="application/javascript" src="jquery-1.8.3.min.js"></script>
<title>serializeArray()与serialize()</title>
<script type="text/javascript">
function onClik(){
    $("#results").html("serializeArray()与serialize()的区别如下:");
    
    var data1 = $("#form1").serializeArray(); //自动将form表单封装成json
    $("#results").append("<br/><b>serializeArray:</b>");
    $.each(data1, function(i, field){
        $("#results").append(field.name+":"+field.value+" ");
    });
    
    $("#results").append("<br/>");
    var data2 = $("#form1").serialize(); //自动将form表单封装成json
    $("#results").append("<b>serialize():</b>"+data2);
}
</script>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
  <p>进货人 :
    <input type="text" name="name" id="name" />
  </p>
  <p>性别:
    <select name="sex" size="1" id="sex">
      <option value="">男</option>
      <option value="">女</option>
    </select>
  </p>
  <table width="708" border="1">
    <tr>
      <td width="185">商品名</td>
      <td width="205">商品数量</td>
      <td width="296">商品价格</td>
    </tr>
    <tr>
      <td>
        <input type="text" name="pro_name" id="pro_name" /></td>
      <td>
        <input type="text" name="pro_num" id="pro_num" /></td>
      <td>
        <input type="text" name="pro_price" id="pro_price" /></td>
    </tr>
    <tr>
      <td><input type="text" name="pro_name2" id="pro_name2" /></td>
      <td><input type="text" name="pro_num2" id="pro_num2" /></td>
      <td><input type="text" name="pro_price2" id="pro_price2" /></td>
    </tr>
  </table>
  <p id="results"></p>
  <input type="button" name="submit" onclick="onClik();" value="提交"/>
</form>
</body>
</html>


<!-- 
serializeArray()与serialize()的区别如下:
serializeArray:name:111 sex:女 pro_name:1 pro_num:2 pro_price:3 pro_name2:11 pro_num2:22 pro_price2:33 
serialize():name=111&sex=%E5%A5%B3&pro_name=1&pro_num=2&pro_price=3&pro_name2=11&pro_num2=22&pro_price2=33 
-->
复制代码

 


本文转自农夫山泉别墅博客园博客,原文链接:http://www.cnblogs.com/yaowen/p/5574855.html,如需转载请自行联系原作者

相关文章
|
8月前
|
C++ 容器
【C++】map和set封装
【C++】map和set封装
57 2
|
9月前
|
C++
【c++】map和set的封装
【c++】map和set的封装
96 0
|
10月前
Object.prototype.toString.call() 和 instanceOf 和 Array.isArray() 区别以及优缺点
Object.prototype.toString.call() 和 instanceOf 和 Array.isArray() 区别以及优缺点
75 0
|
10月前
|
存储 容器
map和set的封装
map和set的封装
80 0
|
C++ 容器
【map和set的封装】
【map和set的封装】
101 0
|
JSON 数据格式
for_forEach_map有什么区别?区别大了
for、forEach、map日常都在用,但是你知道他们有什么区别吗?为什么要有这么多功能相似的东西?性能怎么样?看这里,我告诉你
117 0
|
Java API 索引
Java集合-Set
Java集合-Set
121 2
Java集合-Set
|
编译器 C++
【C++】map和set的封装(上)
【C++】map和set的封装
97 0
|
存储 Java 索引
Java集合之Set(超详细)
Set接口:存储无序、不可重复的数据 (类似于高中讲的集合) HashSet:作为Set接口的主要实现类;线程不安全;可以存储null值 LinkHashSet:作为HashSet的子类;遍历其内部数据时,可以按照添加的顺序输出 TreeSet:可以按照添加对象的指定属性进行排序
102 0
|
存储 安全 Java
Java集合中List,Set以及Map(三者的区别,什么时候用Set,Connection接口)
Java集合中List,Set以及Map(三者的区别,什么时候用Set,Connection接口)
Java集合中List,Set以及Map(三者的区别,什么时候用Set,Connection接口)