jQuery中serializeArray()与serialize()的区别实例分析
更新时间：2015年12月09日 11:53:03 作者：NW_KNIFE
这篇文章主要介绍了jQuery中serializeArray()与serialize()的区别,结合实例形式分析了jQuery中serializeArray()与serialize()的具体功能、使用技巧与用法区别,需要的朋友可以参考下
本文实例讲述了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>
结果如下：
备注：file、image、button、submit、reset都不会被序列化
希望本文所述对大家jQuery程序设计有所帮助。
您可能感兴趣的文章:
- jQuery Form 表单提交插件之formSerialize，fieldSerialize，fieldValue，resetForm，clearForm，clearFields的应用
- jQuery基于ajax()使用serialize()提交form数据的方法
- JQuery中serialize() 序列化
- JQuery中serialize()用法实例分析
- JQuery中serialize()、serializeArray()和param()方法示例介绍
- jQuery ajax中使用serialize()方法提交表单数据示例
- jQuery ajax serialize()方法的使用以及常见问题解决
- jQuery-serialize()输出序列化form表单值的方法
- 与jquery serializeArray()一起使用的函数，主要来方便提交表单
- jQuery使用serialize()表单序列化时出现中文乱码问题的解决办法
相关文章
本文给大家介绍JQuery和PHP结合实现动态进度条上传显示功能，本文分步骤给大家介绍的非常详细，感兴趣的朋友一起看看吧2016-11-11
本文主要介绍了jquery实现焦点轮播效果的示例代码，具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
这篇文章主要介绍了JQuery中Ajax的操作完整例子,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-03-03
找了个时间看了下EasyUI插件，对它的插件感觉是很舒服，特地把Easy UI的大部分功能属性做了一下汇总。使用easyUI的朋友可以收藏下。2011-01-01
这篇文章主要介绍了jQuery中element选择器用法,实例分析了element选择器的功能、定义及相关的操作技巧,具有一定的参考借鉴价值,需要的朋友可以参考下2014-12-12
这篇文章主要介绍了DOM操作和jQuery实现选项移动操作代码分享的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下2016-06-06
本篇文章主要介绍了DropDownList实现可输入可选择的具体实现代码，并附上两种版本（js版本和jquery版本），可供大家选择。有需要的朋友可以参考下2016-12-12
input file样式修改以及图片预览删除功能详细概括（推荐）
这篇文章主要介绍了input file样式修改以及图片预览删除功能，input file 按钮改成自己想要的样式以及.图片预览功能的实现，具体操作步骤大家可查看下文的详细讲解，感兴趣的小伙伴们可以参考一下。2017-08-08
现在二维码越来越流行，很多网页都会有个二维码，扫描后可通过手机浏览。jquery-qrcode是一个能够在浏览器端生成二维码的jquery插件，下面通过本文给大家介绍jQuery qrcode生成二维码的方法，需要的朋友参考下2016-04-04
这篇文章主要介绍了jquery五角星评分插件示例分享,需要的朋友可以参考下2014-02-02
最新评论