jQuery ajax serialize()方法的使用以及常见问题解决


Posted in Javascript onJanuary 27, 2013

使用ajax时,常常需要拼装input数据为'name=abc&sex=1'这种形式,用JQuery的serialize方法可以轻松的完成这个工作!

jQuery ajax - serialize() 方法定义和用法
serialize() 方法通过序列化表单值,创建 URL 编码文本字符串。
您可以选择一个或多个表单元素(比如 input 及/或 文本框),或者 form 元素本身。
序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。

jQuery ajax - serialize() 方法语法
$(selector).serialize()
jQuery ajax - serialize() 方法详细说明

.serialize() 方法创建以标准 URL 编码表示的文本字符串。它的操作对象是代表表单元素集合的 jQuery 对象。

jquery ajax - serialize() 方法表单元素有几种类型:

<form> 
<div><input type="text" name="a" value="1" id="a" /></div> 
<div><input type="text" name="b" value="2" id="b" /></div> 
<div><input type="hidden" name="c" value="3" id="c" /></div> 
<div> 
<textarea name="d" rows="8" cols="40">4</textarea> 
</div> 
<div><select name="e"> 
<option value="5" selected="selected">5</option> 
<option value="6">6</option> 
<option value="7">7</option> 
</select></div> 
<div> 
<input type="checkbox" name="f" value="8" id="f" /> 
</div> 
<div> 
<input type="submit" name="g" value="Submit" id="g" /> 
</div> 
</form>

.serialize() 方法可以操作已选取个别表单元素的 jQuery 对象,比如 <input>, <textarea> 以及 <select>。不过,选择 <form> 标签本身进行序列化一般更容易些:
$('form').submit(function() { 
alert($(this).serialize()); 
return false; 
});

输出标准的查询字符串:
a=1&b=2&c=3&d=4&e=5
jQuery ajax - serialize() 方法注意:只会将”成功的控件“序列化为字符串。如果不使用按钮来提交表单,则不对提交按钮的值序列化。如果要表单元素的值包含到序列字符串中,元素必须使用 name 属性。

以上jQuery ajax - serialize() 方法基础内容转W3C,下面讲解下用jQuery ajax - serialize() 方法时候出现的几种常见问题 下面分享给大家
请看下面例子如:

<form id="form1"> 
<input name="name1" type="text" value="pipi" /> 
<input name="name2" type="radio" value="1" checked/>boy 
<input name="name2" type="radio" value="0"/>girl 
<textarea name="name3">test</textarea> 
</form>

使用:$("#form1").serialize();
结果:name1=pipi&name2=1&name3=test
用jQuery ajax - serialize()方法还有个问题
如果是下面的情况:
<form id="form1"> 
<input name="name" type="text" value="pipi" /> 
<input name="blog" type="text" value="blue submarine" /> 
</form>

使用:$("#form1").serialize();
结果:name1=pipi&blog=blue+submarine
就是如何能让+号变回空格呢?
最后还有一个问题,如下所示:
<form id="form1"> 
<input name="length" type="text" value="pipi" /> 
<input name="blog" type="text" value="blue submarine" /> 
</form>

使用:$("#form1").serialize();
结果:blog=blue+submarine 没法出现length=pipi
原因是length是js数组的属性关键字,出现冲突了,将name改为其他非冲突字符串即可
Javascript 相关文章推荐
基于jquery+thickbox仿校内登录注册框
Jun 07 Javascript
使用jquery与图片美化checkbox和radio控件的代码(打包下载)
Nov 11 Javascript
JavaScript 用cloneNode方法克隆节点的代码
Oct 15 Javascript
JavaScript中prototype为对象添加属性的误区介绍
Oct 15 Javascript
浅谈被jQuery抛弃的函数及替代函数
May 03 Javascript
jQuery Ajax和getJSON获取后台普通json数据和层级json数据用法分析
Jun 08 Javascript
Javascript vue.js表格分页,ajax异步加载数据
Oct 24 Javascript
解析如何利用iframe标签以及js制作时钟
Dec 08 Javascript
js canvas实现适用于移动端的百分比仪表盘dashboard
Jul 18 Javascript
Angular 数据请求的实现方法
May 07 Javascript
JavaScript设计模式之观察者模式实例详解
Jan 16 Javascript
我要点爆”微信小程序云开发之项目建立与我的页面功能实现
May 26 Javascript
js中parseFloat(参数1,参数2)定义和用法及注意事项
Jan 27 #Javascript
Js 冒泡事件阻止实现代码
Jan 27 #Javascript
javascript里模拟sleep(两种实现方式)
Jan 25 #Javascript
调试Javascript代码(浏览器F12及VS中debugger关键字)
Jan 25 #Javascript
如何让easyui gridview 宽度自适应窗口改变及fitColumns应用
Jan 25 #Javascript
js隐藏与显示回到顶部按钮及window.onscroll事件应用
Jan 25 #Javascript
jquery移除button的inline onclick事件(已测试及兼容浏览器)
Jan 25 #Javascript
You might like
PHP的PSR规范中文版
2013/09/28 PHP
JavaScript中几种常见排序算法小结
2011/02/22 Javascript
JQuery获取浏览器窗口内容部分高度的代码
2012/02/24 Javascript
判断JS对象是否拥有某种属性的两种方式
2013/12/02 Javascript
jquery五角星评分插件示例分享
2014/02/21 Javascript
js取模(求余数)隔行变色
2014/05/15 Javascript
js实现回放拖拽轨迹从过程上进行分析
2014/06/26 Javascript
编写简单的jQuery提示插件
2014/12/21 Javascript
浅谈javascript获取元素transform参数
2015/07/24 Javascript
js实现图片放大和拖拽特效代码分享
2015/09/05 Javascript
JavaScript html5 canvas画布中删除一个块区域的方法
2016/01/26 Javascript
javascript之IE版本检测超简单方法
2016/08/20 Javascript
微信小程序 Canvas增强组件实例详解及源码分享
2017/01/04 Javascript
原生js实现回复评论功能
2017/01/18 Javascript
浅谈Node.js爬虫之网页请求模块
2018/01/11 Javascript
LayUI表格批量删除方法
2018/08/15 Javascript
浅谈VUE-CLI脚手架热更新太慢的原因和解决方法
2018/09/28 Javascript
iview同时验证多个表单问题总结
2018/09/29 Javascript
[03:59]第二届DOTA2亚洲邀请赛选手传记-VGJ.rOtk
2017/04/03 DOTA
python读文件逐行处理的示例代码分享
2013/12/27 Python
Python决策树分类算法学习
2017/12/22 Python
Python实现将数据写入netCDF4中的方法示例
2018/08/30 Python
python执行CMD指令,并获取返回的方法
2018/12/19 Python
浅谈python编译pyc工程--导包问题解决
2019/03/20 Python
python实现飞机大战游戏
2020/10/26 Python
Python使用pymysql模块操作mysql增删改查实例分析
2019/12/19 Python
python re模块匹配贪婪和非贪婪模式详解
2020/02/11 Python
python不同系统中打开方法
2020/06/23 Python
解析Python 偏函数用法全方位实现
2020/06/26 Python
python获取本周、上周、本月、上月及本季的时间代码实例
2020/09/08 Python
Python使用pickle进行序列化和反序列化的示例代码
2020/09/22 Python
Python爬虫抓取论坛关键字过程解析
2020/10/19 Python
一款纯css3实现简单的checkbox复选框和radio单选框
2014/11/05 HTML / CSS
教你打造完美的创业计划书
2014/01/06 职场文书
2014年图书馆个人工作总结
2014/12/18 职场文书
2015年安全生产管理工作总结
2015/05/25 职场文书