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. JQuery-Ajax后台提交数据与获取数据

    function jqajax(){ var urlName = $("#urlName").val(); var urla = $("#url").val() ...

  2. AJAX-----10iframe模拟ajax文件上传效果原理2

    在实际开发中其实我们可以给用户一些提示,比如上传成功或者上传失败,废话不多说,走码: <!DOCTYPE html> <html lang="en"> &l ...

  3. [2]R语言在数据处理上的禀赋之——可视化技术

    本文目录 Java的可视化技术 R的可视化技术 二维做图利器plot的参数配置 *权限机制 *plot独有的参数 *plot的type介绍 *title介绍 *公共参数集合--par *par的权限机 ...

  4. TCP/IP学习-链路层

    链路层: 路径MTU: 网络层: ifconfig netstat IP首部 网络字节序:大端字节序

  5. Python学习笔记-常用模块

    1.python模块 如果你退出 Python 解释器并重新进入,你做的任何定义(变量和方法)都会丢失.因此,如果你想要编写一些更大的程序,为准备解释器输入使用一个文本编辑器会更好,并以那个文件替代作 ...

  6. Java程序员开发参考资源

    构建 这里搜集了用来构建应用程序的工具. Apache Maven:Maven使用声明进行构建并进行依赖管理,偏向于使用约定而不是配置进行构建.Maven优于Apache Ant.后者采用了一种过程化 ...

  7. new一个数组，delete释放内存

    int *a = new int[4]; for(int i=0;i<4;i++) { a[i] = i; printf("a[%d]=%d\n", i, i); } del ...

  8. java编写一个可以上、下、左、右移动的坦克

    唉,本人学习进度缓慢,但依然会坚持不懈!有感兴趣的朋友可以在下面留言. 源代码献上: /* * 画出我的坦克,使他可以上下左右移动 */package com.test4; import javax. ...

  9. 《BI项目笔记》基于雪花模型的维度设计

    GBGradeCode 外键关系: 1 烟叶等级 T_GBGradeCode.I_DistinctionID=T_Distinction.I_DistinctionID 烟叶等级分为:上等烟.中等烟. ...

  10. linux&win7双系统安装

    linux&win7双系统安装 硬盘大小分配方案 按照顺序来建立分区 /swap    4G     ==即交换分区,也是一种文件系统,它的作用是作为Linux的虚拟内存.在Windows下, ...