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 相关文章推荐
JS解密入门之凭直觉解
Jun 25 Javascript
js+xml生成级联下拉框代码
Jul 24 Javascript
使用JavaScript构建JSON格式字符串实现步骤
Mar 22 Javascript
javascript 函数声明与函数表达式的区别介绍
Oct 05 Javascript
浅谈重写window对象的方法
Dec 29 Javascript
javascript实现的登陆遮罩效果汇总
Nov 09 Javascript
微信小程序使用第三方库Underscore.js步骤详解
Sep 27 Javascript
Angular JS 生成动态二维码的方法
Feb 23 Javascript
react.js 父子组件数据绑定实时通讯的示例代码
Sep 25 Javascript
vue项目中引入Sass实例方法
Aug 27 Javascript
jquery使用echarts实现有向图可视化功能示例
Nov 25 jQuery
vue实现简易音乐播放器
Aug 14 Vue.js
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
php带密码功能并下载远程文件保存本地指定目录 修改加强版
2010/05/16 PHP
使用cookie实现统计访问者登陆次数
2013/06/08 PHP
Discuz!X中SESSION机制实例详解
2015/09/23 PHP
PHP数组去重比较快的实现方式
2016/01/19 PHP
PHP架构及原理知识点详解
2019/12/22 PHP
PHP实现文件上传与下载
2020/08/28 PHP
文本框的字数限制功能jquery插件
2009/11/24 Javascript
vue数字类型过滤器的示例代码
2017/09/07 Javascript
JS实现定时任务每隔N秒请求后台setInterval定时和ajax请求问题
2017/10/15 Javascript
vue填坑之webpack run build 静态资源找不到的解决方法
2018/09/03 Javascript
vue实现简单加法计算器
2020/10/22 Javascript
[01:01:31]2018DOTA2亚洲邀请赛3月29日小组赛B组 Mineski VS paiN
2018/03/30 DOTA
Python3实现并发检验代理池地址的方法
2016/09/18 Python
Python管理Windows服务小脚本
2018/03/12 Python
Python实现按照指定要求逆序输出一个数字的方法
2018/04/19 Python
深入解析Python小白学习【操作列表】
2019/03/23 Python
Ubuntu18.04中Python2.7与Python3.6环境切换
2019/06/14 Python
python使用socket实现的传输demo示例【基于TCP协议】
2019/09/24 Python
python OpenCV GrabCut使用实例解析
2019/11/11 Python
pygame编写音乐播放器的实现代码示例
2019/11/19 Python
python GUI库图形界面开发之PyQt5窗口类QMainWindow详细使用方法
2020/02/26 Python
python GUI库图形界面开发之PyQt5菜单栏控件QMenuBar的详细使用方法与实例
2020/02/28 Python
俄罗斯茶和咖啡网上商店:Tea.ru
2021/01/26 全球购物
介绍一下except的用法和作用
2015/01/22 面试题
重阳节登山活动方案
2014/02/03 职场文书
建议书怎么写
2014/03/12 职场文书
陈欧的广告词
2014/03/18 职场文书
村道德模范事迹材料
2014/08/28 职场文书
2014离婚协议书范文
2014/09/10 职场文书
纪委书记群众路线整改措施思想汇报
2014/10/09 职场文书
优秀教师申报材料
2014/12/16 职场文书
长江三峡导游词
2015/01/31 职场文书
2016情人节宣传语
2015/07/14 职场文书
导游词之海南天涯海角
2019/12/05 职场文书
Python实现位图分割的效果
2021/11/20 Python
MySQL实战记录之如何快速定位慢SQL
2022/03/23 MySQL