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操作CheckBoxList实现全选/反选(在客服端完成)
Feb 02 Javascript
JS保留两位小数 四舍五入函数的小例子
Nov 20 Javascript
flash遮住div问题的正确解决方法
Feb 27 Javascript
JS动态显示表格上下frame的方法
Mar 31 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(下)
Oct 28 Javascript
jQuery实现公告新闻自动滚屏效果实例代码
Jul 14 Javascript
bootstrap日历插件datetimepicker使用方法
Dec 14 Javascript
jquery easyui如何实现格式化列
Jul 30 jQuery
微信小程序 Animation实现图片旋转动画示例
Aug 22 Javascript
解决LayUI加上form.render()下拉框和单选以及复选框不出来的问题
Sep 27 Javascript
JS回调函数简单易懂的入门实例分析
Sep 29 Javascript
浅谈JavaScript节流和防抖函数
Aug 25 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
PHP网页游戏学习之Xnova(ogame)源码解读(十四)
2014/06/26 PHP
微信公众号开发之微信公共平台消息回复类实例
2014/11/14 PHP
php绘制圆形的方法
2015/01/24 PHP
php简单操作mysql数据库的类
2015/04/16 PHP
基于jQueryUI和Corethink实现百度的搜索提示功能
2016/11/09 PHP
ThinkPHP Where 条件中常用表达式示例(详解)
2017/03/31 PHP
JavaScript基本概念初级讲解论坛贴的学习记录
2009/02/22 Javascript
javascript中最常用的继承模式 组合继承
2010/08/12 Javascript
jQuery实现鼠标移到元素上动态提示消息框效果
2013/10/20 Javascript
简单的Jquery全选功能
2013/11/07 Javascript
JS使用正则表达式除去字符串中重复字符的方法
2015/11/05 Javascript
jQuery读取XML文件的方法示例
2017/02/03 Javascript
基于jQuery实现咖啡订单管理简单应用
2017/02/10 Javascript
ES6新特性:使用export和import实现模块化详解
2017/07/31 Javascript
JavaScript正则表达式函数总结(常用)
2018/02/22 Javascript
解决iview打包时UglifyJs报错的问题
2018/03/07 Javascript
详解各版本React路由的跳转的方法
2018/05/10 Javascript
微信小程序仿RadioGroup改变样式的处理方案
2018/07/13 Javascript
解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题
2018/08/20 Javascript
vue+springboot实现项目的CORS跨域请求
2018/09/05 Javascript
JavaScript实现的级联算法示例【省市二级联动功能】
2018/12/25 Javascript
详解vue中的父子传值双向绑定及数据更新问题
2019/06/13 Javascript
[02:38]2018年度DOTA2最佳劣单位选手-完美盛典
2018/12/17 DOTA
Python使用PyCrypto实现AES加密功能示例
2017/05/22 Python
Python使用matplotlib绘制余弦的散点图示例
2018/03/14 Python
Python简单实现查找一个字符串中最长不重复子串的方法
2018/03/26 Python
CentOS 7 安装python3.7.1的方法及注意事项
2018/11/01 Python
python3 selenium自动化测试 强大的CSS定位方法
2019/08/23 Python
html5+css3之制作header实例与更新
2020/12/21 HTML / CSS
什么是Smart Navigation?
2016/07/03 面试题
人力资源部副职的竞聘演讲稿
2014/01/07 职场文书
致跳高运动员加油稿
2014/02/12 职场文书
个人综合鉴定材料
2014/05/23 职场文书
工会工作先进事迹
2014/08/18 职场文书
圣诞节开幕词
2015/01/29 职场文书
消防安全主题班会
2015/08/12 职场文书