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程序设计有所帮助。

Javascript 相关文章推荐
javascript 写类方式之七
Jul 05 Javascript
jQuery 数据缓存模块进化史详细介绍
Nov 19 Javascript
javascript打印输出json实例
Nov 11 Javascript
为指定的元素添加遮罩层的示例代码
Jan 15 Javascript
浅析函数声明和函数表达式——函数声明的声明提前
May 03 Javascript
原生JS实现九宫格抽奖效果
Apr 01 Javascript
JS简单验证上传文件类型的方法
Apr 17 Javascript
Vue Element使用icon图标教程详解(第三方)
Feb 07 Javascript
vue中实现图片和文件上传的示例代码
Mar 16 Javascript
JS实现显示当前日期的实例代码
Jul 03 Javascript
微信小程序 点击切换样式scroll-view实现代码实例
Oct 11 Javascript
js实现表格数据搜索
Aug 09 Javascript
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
You might like
常用表单验证类,有了这个,一般的验证就都齐了。
2006/12/06 PHP
PHP函数microtime()用法与说明
2013/12/04 PHP
curl实现站外采集的方法和技巧
2014/01/31 PHP
PHP实现克鲁斯卡尔算法实例解析
2014/08/22 PHP
php实现QQ空间获取当前用户的用户名并生成图片
2015/07/25 PHP
CI框架(CodeIgniter)操作redis的方法详解
2018/01/25 PHP
PHP获取真实IP及IP模拟方法解析
2020/11/24 PHP
jquery中获得$.ajax()事件返回的值并添加事件的方法
2010/04/15 Javascript
AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法
2014/06/06 Javascript
Bootstrap每天必学之栅格系统(布局)
2015/11/25 Javascript
jQuery图片旋转插件jQueryRotate.js用法实例(附demo下载)
2016/01/21 Javascript
JavaScript编码风格指南(中文版)
2016/08/26 Javascript
webpack2.0搭建前端项目的教程详解
2017/04/05 Javascript
基于Particles.js制作超炫粒子动态背景效果(仿知乎)
2017/09/13 Javascript
在antd中setFieldsValue和defaultVal的用法
2020/10/29 Javascript
[01:24]2014DOTA2 TI第二日 YYF表示这届谁赢都有可能
2014/07/11 DOTA
python使用cStringIO实现临时内存文件访问的方法
2015/03/26 Python
Python编程中time模块的一些关键用法解析
2016/01/19 Python
Python之Scrapy爬虫框架安装及使用详解
2017/11/16 Python
python3获取当前文件的上一级目录实例
2018/04/26 Python
python读取并定位excel数据坐标系详解
2019/06/26 Python
全球酒店预订网站:Hotels.com
2016/08/10 全球购物
意大利宠物用品购物网站:Bauzaar
2018/09/15 全球购物
介绍JAVA 中的Collection FrameWork(及如何写自己的数据结构)
2014/10/31 面试题
与UNIX有关的几个名词
2015/09/17 面试题
会计系个人求职信范文分享
2013/12/20 职场文书
商场端午节活动方案
2014/01/29 职场文书
煤矿开采专业求职信
2014/07/08 职场文书
乡镇党员干部群众路线对照检查材料思想汇报
2014/09/28 职场文书
个人融资协议书
2014/10/02 职场文书
开展批评与自我批评心得体会
2014/10/17 职场文书
2014年妇幼保健工作总结
2014/12/08 职场文书
辞职信范文大全
2015/03/02 职场文书
志愿者服务宣传标语口号
2015/12/26 职场文书
写给汽车4S店的创业计划书,拿来即用!
2019/08/09 职场文书
Redis 彻底禁用RDB持久化操作
2021/07/09 Redis