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. 15. 星际争霸之php设计模式--策略模式

    题记==============================================================================本php设计模式专辑来源于博客(jymo ...

  2. 获取dll中根目录

    AppDomain.CurrentDomain.BaseDirectory获取当前应用程序域的基目录 好像是万能的:form:可执行文件路径控制台:输出路径web:根目录

  3. [windows][C++][库]遍历删除文件夹

    #include"windows.h"#include"string.h" BOOL IsDirectory(const char *pDir) { ]; Ze ...

  4. Mac OS下pip安装 pillow

    sudo pip install pil报错如下:/Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Develo ...

  5. sd 卡驱动--基于高通平台

    点击打开链接 内容来自以下博客: http://blog.csdn.net/qianjin0703/article/details/5918041 Linux设备驱动子系统第二弹 - SD卡 (有介绍 ...

  6. Winform开发框架之介绍

    winform开发框架,尽量减少程序员在界面中的代码量和工作量,Model自动生成,界面以及控件自动生成,简单的逻辑自动生成.自动生成的界面已经实现简单逻辑增删改查功能. 其他开发框架都已经或多火烧实 ...

  7. Linux信号基础

    Linux信号基础   作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! Linux进程基础一文中已经提到,Linux以进程为单位来 ...

  8. 用HttpSessionListener与HttpSessionBindingListener实现在线人数统计

    在线人数统计方面的实现,最初我的想法是,管理session,如果session销毁了就减少,如果登陆用户了就新增一个,但是如果是用户非法退出,如:未注销,关闭浏览器等,这个用户的session是管理不 ...

  9. Redis - 发布和订阅

    一.概述 1). 发布和订阅是一种消息通信模式. 2). 优点:使消息订阅者和消息发布者耦合度降低,类似设计模式中的观察者模式. 二.发布和订阅 订阅命令: // 订阅一个或多个频道 // 返回值:v ...

  10. javascript Demo

    var vm=(function(){ var name="jasper"; var changename=function(v){ name=v; }; return { nam ...