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. windows系统调用 semaphore信号量

    #include "iostream" #include "windows.h" #include "cstring" using name ...

  2. ftp 530 This FTP serveris anonymous only，

    引用:http://blog.sina.com.cn/s/blog_7e16680c01018ox1.html 三.遇到的问题 1.只允许匿名用户登录 现象:ftp连接过程中,提示输入用户名,输入本机 ...

  3. ［caffe］linux下安装caffe（无cuda）以及python接口

    昨天在mac上折腾了一天都没有安装成功,晚上在mac上装了一个ParallelDesktop虚拟机,然后装了linux,十分钟就安装好了,我也是醉了＝.＝ 主要过程稍微记录一下: 1.安装BLAS s ...

  4. ms

    meanShift的概念最早是由Fukunage[1]在1975年提出的,其最初的含义正如其名:偏移的均值向量:但随着理论的发展,meanShift的含义已经发生了很多变化.如今,我们说的meanSh ...

  5. 修改yv12像素值

    YV12内存布局 1 unsigned char *pY = (unsigned char *)pBuf; unsigned char *pV = pY + nWidth * nHeight; uns ...

  6. StructureMap使用方法（转）

    终于到了题目中的MVC使用StructureMap依赖注入的配置与实现了.在ASP.Net三层架构应用中StructureMap的是最老的IOC/DI工具,也就是依赖注入,很多线上的项目都使用了Str ...

  7. 互联网中级Javascript面试题

    互联网中级Javascript面试题 1.实现一个函数clone,可以对JavaScript中的5种主要的数据类型(包括Number.String.Object.Array.Boolean)进行值复制 ...

  8. eclipse快捷方式

    虽说右键可以直接发送快捷方式到桌面,但是点击桌面图标确提示错误,偶然发现右键选个什么,配置下启动文件就ok了(就是链接到安装目录里面那个可以启动的exe),后来怎么复现不了,伤感了,不过是可以用了,还 ...

  9. awk改变了OFS，$0却没变化

    一个文件1.txt,内容如下 a b c d e 目的把列变行,输出为: a b c d e 脚本如下: awk 'BEGIN{RS="";FS="\n";OF ...

  10. CSS 笔记一（Selectors/ Backgrounds/ Borders/ Margins/ Padding/ Height and Width）

    Selectors/ Backgrounds/ Borders/ Margins/ Padding/ Height and Width CSS Introduction: CSS stands for ...