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. Android -- 是时候来了解一波EventBus了

    1,最早在项目中使用EventBus是在去年的时候,但自己一直没抽出时间来记录记录一下,今天就来简单的使用一下,先看一下EventBus的定义是什么 EventBus:是一个发布 / 订阅的事件总线. ...

  2. 设置IE默认文本模式的方法

    设置IE默认文本模式的方法 <meta http-equiv="X-UA-Compatible" content="IE=8" /> IE=5.6. ...

  3. Cordova for Android(Windows)环境配置

    PS:注意事项 一些坑在此声明: 1.安装Eclipse后,记得设置各项编码格式为utf-8 请移步:http://www.blogjava.net/xiaomage234/archive/2014/ ...

  4. PHPCMS V9 框架代码分析（入口程序）

    PHPCMS是采用MVC设计模式开发,基于模块和操作的方式进行访问,采用单一入口模式进行项目部署和访问,无论访问任何一个模块或者功能,只有一个统一的入口. 入口程序是在前期处理用户请求的引导程序.它是 ...

  5. C#委托，事件最初浅的和最易看懂的学习笔记

    对于委托和事件,看了不少博文,当时好像都理解了,过了一段时间,又忘记的差不多了.每每如此,感觉自己很笨,记性差,其实是没有深入理解透切,没有按照自己的语言表达出来,当然容易忘记.今天又花了一些时间,好 ...

  6. Flowplayer-JavaScript API

    source url: https://flowplayer.org/docs/api.html Global API access Use the flowplayer function to ge ...

  7. background-clip 制作文字火焰效果

    1.Background-clip的语法 background-clip: border-box || padding-box || context-box || no-clip || text 2. ...

  8. linux-ubuntu常用命令

    常用命令 cd 目录 #跳转到指定目录 cp fileName pfileName #拷贝fileName到pfilename ll #显示目录下的所有文件和目录 uname -a #查看内核版本 c ...

  9. 【双标记线段树】bzoj1798维护序列seq

    一.题目 描述 老师交给小可可一个维护数列的任务,现在小可可希望你来帮他完成. 有长为N的数列,不妨设为a1,a2,-,aN .有如下三种操作形式: (1)把数列中的一段数全部乘一个值; (2)把数列 ...

  10. 16-underscore库（上）

    第16课 underscore库 一.介绍 Underscore 是一个 JavaScript 工具库,它提供了一整套函数式编程的实用功能,但是没有扩展任何 JavaScript 内置对象.他弥补了 ...