serialize()序列化表单元素为字符串，用于 Ajax 请求。

　　serializeArray()序列化表单元素为JSON数据。

　　具体实例如下：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 2 <html xmlns="http://www.w3.org/1999/xhtml">

 3 <head>

 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 5 <script type="application/javascript" src="jquery-1.10.2.js"></script>

 6 <title>serializeArray()与serialize()</title>

 7 <script type="text/javascript">

 8 function onClik(){

 9     $("#results").html("serializeArray()与serialize()的区别如下：");

10

11     var data1 = $("#form1").serializeArray(); //自动将form表单封装成json

12     $("#results").append("<br/><b>serializeArray:</b>");

13     $.each(data1, function(i, field){

14         $("#results").append(field.name+":"+field.value+" ");

15     });

16

17     $("#results").append("<br/>");

18     var data2 = $("#form1").serialize(); //自动将form表单封装成json

19     $("#results").append("<b>serialize():</b>"+data2);

20 }

21 </script>

22 </head>

23

24 <body>

25 <form id="form1" name="form1" method="post" action="">

26   <p>进货人 :

27     <label for="name"></label>

28     <input type="text" name="name" id="name" />

29   </p>

30   <p>性别:

31     <label for="sex"></label>

32     <select name="sex" size="1" id="sex">

33       <option value="男">男</option>

34       <option value="女">女</option>

35     </select>

36   </p>

37   <table width="708" border="1">

38     <tr>

39       <td width="185">商品名</td>

40       <td width="205">商品数量</td>

41       <td width="296">商品价格</td>

42     </tr>

43     <tr>

44       <td><label for="pro_name"></label>

45         <input type="text" name="pro_name" id="pro_name" /></td>

46       <td><label for="pro_num"></label>

47         <input type="text" name="pro_num" id="pro_num" /></td>

48       <td><label for="pro_price"></label>

49         <input type="text" name="pro_price" id="pro_price" /></td>

50     </tr>

51     <tr>

52       <td><input type="text" name="pro_name2" id="pro_name2" /></td>

53       <td><input type="text" name="pro_num2" id="pro_num2" /></td>

54       <td><input type="text" name="pro_price2" id="pro_price2" /></td>

55     </tr>

56   </table>

57   <p id="results"></p>

58   <input type="button" name="submit" onclick="onClik();" value="提交"/>

59 </form>

60 </body>

61 </html>

结果如下：

　　

　　备注：file、image、button、submit、reset都不会被序列化

参考资料：

http://hi.baidu.com/lbhlamp/item/6b2812c66a4d6dc5994aa00e

【jQuery】serializeArray()与serialize()的区别的更多相关文章

  1. serializeArray()与serialize()的区别

    serialize()序列化表单元素为字符串,用于 Ajax 请求. serializeArray()序列化表单元素为JSON数据. <script type="text/javasc ...

  2. serializeArray()和.serialize()的区别、联系

    serializeArray()和.serialize()的区别.联系   <form id='addForm' action='UserAdd.action' type='post'> ...

  3. jquery serializeArray()、serialize()增加数据

    转自:http://blog.csdn.net/csdnzhangtao5/article/details/52981541 serialize().serializeArray()方法都是jquer ...

  4. jquery图片延迟加载 及 serializeArray、serialize用法记录

    1.使用jquery实现 图片延迟加载 由于用户访问页面需要加载很多的图片,延迟加载技术在电子商务网站领域越来越普及,淘宝商城,京东商城,凡客等访问量巨大的电子商务站点为了增加用户用户体验,访问速度以 ...

  5. jquery中的serialize

    jquery中的serialize对serializeArray进行了封装,serializeArray源码中定义将disabled的过滤掉,所以提交后值为null 解决方式是:在提交的时候,讲dis ...

  6. js进阶 14-8 表单序列化函数serializeArray()和serialize()的区别是什么

    js进阶 14-8 表单序列化函数serializeArray()和serialize()的区别是什么 一.总结 一句话总结:两者都是对表单进行序列化,serializeArray()返回的是json ...

  7. jQuery介绍 DOM对象和jQuery对象的转换与区别

    jQuery介绍 DOM对象和jQuery对象的转换与区别 jQuery介绍      jQuery: http://jquery.com/      write less, do more.   j ...

  8. jquery生产和开发的区别

    今天说一下jquery生产和开发的区别,在我们下载jquery的时候,会有两个下载链接,一个是jquery.min.js .迷你版 (生产),另一个是 jquery.js .开发版 .不知道的人可能就 ...

  9. JQuery this和$(this)的区别及获取$(this)子元素对象的方法

    1.JQuery this和$(this)的区别 相信很多刚接触JQuery的人,很多都会对$(this)和this的区别模糊不清,那么这两者有什么区别呢? 首先来看看JQuery中的  $()  这 ...

随机推荐

  1. oracle 面试题

    1.对数据库SQL2005.ORACLE熟悉吗?   SQL2005是微软公司的数据库产品.是一个RDBMS数据库,一般应用在一些中型数据库的应用,不能跨平台.   ORACLE是ORACLE公司的数 ...

  2. Gym 100500B

    题目给了四个轮子,每个轮子上有按顺序排列的n个数,要求适当旋转每个轮子,使得四个轮子相同行数相加和相同. 首先,可以计算出每一行的和应该是多少,记为Sum.然后固定第一个轮子,二重循环枚举2.3轮子, ...

  3. CentOS7安装Apache2.4+PHP5.6

    linux系统CentOS7 先下载Apache需要依赖的软件 1.APR 下载地址http://apr.apache.org/download.cgi wget下载路径http://mirror.b ...

  4. openlayers 学习笔记之1

    1. 为Web Gis客户端开发的javascript 框架 百度文库中的教程:入门经典> 1) 初始化map: map = new OpenLayers.Map(mapContainerNam ...

  5. POJ 1852 Ants

    题目的意思是说一个长度为m的杆,上面有n个蚂蚁,告诉每个蚂蚁的初始位置,每个蚂蚁速度都是一样的,问所有的蚂蚁离开杆的最短和最长时间是多少. 模拟题,所有的蚂蚁看成一样的,可以这样理解,即使相撞按反方向 ...

  6. EasyUI中在表单提交之前进行验证

    使用EasyUi我们可以在客户端表单提交之前进行验证,过程如下:只需在onSubmit的时候使用return  $("#form1").form('validate')方法即可,E ...

  7. java语言的认识

    class Hello{ public static void main(String [] args) { System.out.println("Hello Word 你好") ...

  8. Java菜鸟学习 Script 脚本语言（简介)

    script 可以写在head里 也可以写在body里 还可以写在 /html后面 script 也是成对出现的  <script></script> 他有三种常见的对话框 1 ...

  9. Android 图片的放大缩小拖拉

    package com.example.ImageView; import android.annotation.SuppressLint; import android.content.Contex ...

  10. [问题2014S05] 解答

    [问题2014S05] 解答  (本解答由谷嵘同学提供) 首先, 由 \(\mathrm{tr}(AB)=\mathrm{tr}(BA)\) 可得 \(a=0\), 或者由 Cauchy-Binet ...