编程 Javascript

jQuery中serializeArray()与serialize()的区别实例分析

Posted in Javascript onDecember 09, 2015

本文实例讲述了jQuery中serializeArray()与serialize()的区别。分享给大家供大家参考，具体如下：

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

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

具体实例如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="application/javascript" src="jquery-1.10.2.js"></script>
<title>serializeArray()与serialize()</title>
<script type="text/javascript">
function onClik(){
  $("#results").html("serializeArray()与serialize()的区别如下：");
  var data1 = $("#form1").serializeArray(); //自动将form表单封装成json
  $("#results").append("<br/><b>serializeArray:</b>");
  $.each(data1, function(i, field){
    $("#results").append(field.name+":"+field.value+" ");
  });
  $("#results").append("<br/>");
  var data2 = $("#form1").serialize(); //自动将form表单封装成json
  $("#results").append("<b>serialize():</b>"+data2);
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
 <p>进货人 :
  <label for="name"></label>
  <input type="text" name="name" id="name" />
 </p>
 <p>性别:
  <label for="sex"></label>
  <select name="sex" size="1" id="sex">
   <option value="男">男</option>
   <option value="女">女</option>
  </select>
 </p>
 <table width="708" border="1">
  <tr>
   <td width="185">商品名</td>
   <td width="205">商品数量</td>
   <td width="296">商品价格</td>
  </tr>
  <tr>
   <td><label for="pro_name"></label>
    <input type="text" name="pro_name" id="pro_name" /></td>
   <td><label for="pro_num"></label>
    <input type="text" name="pro_num" id="pro_num" /></td>
   <td><label for="pro_price"></label>
    <input type="text" name="pro_price" id="pro_price" /></td>
  </tr>
  <tr>
   <td><input type="text" name="pro_name2" id="pro_name2" /></td>
   <td><input type="text" name="pro_num2" id="pro_num2" /></td>
   <td><input type="text" name="pro_price2" id="pro_price2" /></td>
  </tr>
 </table>
 <p id="results"></p>
 <input type="button" name="submit" onclick="onClik();" value="提交"/>
</form>
</body>
</html>

结果如下：

jQuery中serializeArray()与serialize()的区别实例分析

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

希望本文所述对大家jQuery程序设计有所帮助。

jQuery中serializeArray()与serialize()的区别实例分析

- Author -

NW_KNIFE

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JS 获取span标签中的值的代码支持ie与firefox

Aug 24 Javascript

Jquery操作下拉框(DropDownList)实现取值赋值

Aug 13 Javascript

javascript日期对象格式化为字符串的实现方法

Jan 14 Javascript

解决js下referer兼容各大浏览器的方法

Nov 03 Javascript

纯js实现无限空间大小的本地存储

Jun 18 Javascript

使用javaScript动态加载Js文件和Css文件

Oct 24 Javascript

javascript类型系统——日期Date对象全面了解

Jul 13 Javascript

JavaScript兼容性总结之获取非行间样式案例

Aug 07 Javascript

NODE.JS跨域问题的完美解决方案

Oct 20 Javascript

canvas实现手机端用来上传用户头像的代码

Oct 20 Javascript

浅谈Vue2.0中v-for迭代语法的变化(key、index)

Mar 06 Javascript

jQuery 实现扁平式小清新导航

Jul 07 jQuery

jQuery实现form表单元素序列化为json对象的方法

Dec 09 #Javascript

jQuery实现页面顶部显示的进度条效果完整实例

Dec 09 #Javascript

深入浅析react native es6语法

Dec 09 #Javascript

JavaScript程序设计之JS调试

Dec 09 #Javascript

js实现的星星评分功能函数

Dec 09 #Javascript

JavaScript中的this到底是什么(一)

Dec 09 #Javascript

js实现的奥运倒计时时钟效果代码

Dec 09 #Javascript