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 相关文章推荐
JavaScript方法和技巧大全
Dec 27 Javascript
jquery子元素过滤选择器使用示例
Jun 24 Javascript
javascript控制在光标位置插入文字适合表情的插入
Jun 09 Javascript
jQuery结合CSS制作动态的下拉菜单
Oct 27 Javascript
JS实现带提示的星级评分效果完整实例
Oct 30 Javascript
javascript模块化简单解析
Apr 07 Javascript
vue双向绑定简要分析
Mar 23 Javascript
JavaScript之RegExp_动力节点Java学院整理
Jun 29 Javascript
javascript算法之二叉搜索树的示例代码
Sep 12 Javascript
JS实现前端页面的搜索功能
Jun 12 Javascript
深入浅析Node环境和浏览器的区别
Aug 14 Javascript
浅析JavaScript异步代码优化
Mar 18 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
双料怀旧--SHARP GF515的维护、修理和简单调试
2021/03/02 无线电
dede3.1分页文字采集过滤规则详说(图文教程)续二
2007/04/03 PHP
php生成的html meta和link标记在body标签里 顶部有个空行
2010/05/18 PHP
JS异常处理try..catch语句的作用和实例
2014/05/05 PHP
php递归实现无限分类的方法
2015/07/28 PHP
PHP实现JS中escape与unescape的方法
2016/07/11 PHP
PHP与以太坊交互详解
2018/08/24 PHP
PHP 计算两个时间段之间交集的天数示例
2019/10/24 PHP
探讨js中的双感叹号判断
2013/11/11 Javascript
jquery实现带二级菜单的导航示例
2014/04/28 Javascript
页面加载完后自动执行一个方法的js代码
2014/09/06 Javascript
iScroll.js 使用方法参考
2016/05/16 Javascript
基于JavaScript实现无缝滚动效果
2017/07/21 Javascript
使用vux实现上拉刷新功能遇到的坑
2018/02/08 Javascript
Vue+webpack项目配置便于维护的目录结构教程详解
2018/10/14 Javascript
深入理解使用Vue实现Context-Menu的思考与总结
2019/03/09 Javascript
关于layui的下拉搜索框异步加载数据的解决方法
2019/09/28 Javascript
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
2020/06/02 jQuery
[46:55]完美世界DOTA2联赛决赛 FTD vs Phoenix 第三场 11.08
2020/11/11 DOTA
Python中的CURL PycURL使用例子
2014/06/01 Python
Python算法之求n个节点不同二叉树个数
2017/10/27 Python
Django实现简单分页功能的方法详解
2017/12/05 Python
值得收藏,Python 开发中的高级技巧
2018/11/23 Python
jupyter notebook 重装教程
2020/04/16 Python
keras实现theano和tensorflow训练的模型相互转换
2020/06/19 Python
Python __slots__的使用方法
2020/11/15 Python
python不同版本的_new_不同点总结
2020/12/09 Python
python实现马丁策略回测3000只股票的实例代码
2021/01/22 Python
Python3.9.0 a1安装pygame出错解决全过程(小结)
2021/02/02 Python
HTML5和以前HTML4的区别整理
2013/10/20 HTML / CSS
大专应届生个人简历的自我评价
2013/10/15 职场文书
八项规定整改方案
2014/02/21 职场文书
本科应届生求职信
2014/08/05 职场文书
2014教师党员自我评议总结
2014/09/19 职场文书
无子女夫妻离婚协议书(4篇)
2014/10/20 职场文书
python必学知识之文件操作(建议收藏)
2021/05/30 Python