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笔记 String类replace函数的一些事
Sep 22 Javascript
非主流的textarea自增长实现js代码
Dec 20 Javascript
jquery获得页面元素的坐标值实现思路及代码
Apr 15 Javascript
JQuery插件fancybox无法在弹出层使用左右键的解决办法
Dec 25 Javascript
Bootstrap每天必学之缩略图与警示窗
Nov 29 Javascript
BootStrap 模态框实现刷新网页并关闭功能
Jan 04 Javascript
js date 格式化
Feb 15 Javascript
jQuery+pjax简单示例汇总
Apr 21 jQuery
AngularJS入门教程二:在路由中传递参数的方法分析
May 27 Javascript
layui实现table加载的示例代码
Aug 14 Javascript
如何自定义微信小程序tabbar上边框的颜色
Jul 09 Javascript
微信小程序后端实现授权登录
Feb 24 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获取301跳转URL简单实例
2013/12/16 PHP
Yii框架登录流程分析
2014/12/03 PHP
浅谈PHP eval()函数定义和用法
2016/06/21 PHP
纯js实现的论坛常用的运行代码的效果
2008/07/15 Javascript
如何确保JavaScript的执行顺序 之实战篇
2011/03/03 Javascript
js关于字符长度限制的问题示例探讨
2014/01/24 Javascript
JQuery radio(单选按钮)操作方法汇总
2015/04/15 Javascript
jQuery验证插件validate使用详解
2016/05/11 Javascript
js检测离开或刷新页面时表单数据是否更改的方法
2016/08/02 Javascript
Bootstrap Navbar Component实现响应式导航
2016/10/08 Javascript
JS双击变input框批量修改内容
2016/12/12 Javascript
微信小程序 详解页面跳转与返回并回传数据
2017/02/13 Javascript
解决layui使用layui-icon出现默认图标的问题
2019/09/11 Javascript
Vue使用vue-draggable 插件在不同列表之间拖拽功能
2020/03/12 Javascript
Javascript如何实现扩充基本类型
2020/08/26 Javascript
nuxt.js服务端渲染中axios和proxy代理的配置操作
2020/11/06 Javascript
[06:14]《辉夜杯》外卡赛附加赛 4支战队巡礼
2015/10/23 DOTA
常用python数据类型转换函数总结
2014/03/11 Python
Python中实现三目运算的方法
2015/06/21 Python
利用python爬取散文网的文章实例教程
2017/06/18 Python
python操作kafka实践的示例代码
2019/06/19 Python
Pandas库之DataFrame使用的学习笔记
2019/06/21 Python
解决pycharm下os.system执行命令返回有中文乱码的问题
2019/07/07 Python
Python使用QQ邮箱发送邮件报错smtplib.SMTPAuthenticationError
2019/12/20 Python
解决jupyter notebook显示不全出现框框或者乱码问题
2020/04/09 Python
canvas基础之图形验证码的示例
2018/01/02 HTML / CSS
HTML5 贪吃蛇游戏实现思路及源代码
2013/09/03 HTML / CSS
全球性的在线购物网站:Zapals
2017/03/22 全球购物
水污染治理专业毕业生推荐信
2013/11/14 职场文书
酒店副总经理岗位职责范本
2014/02/04 职场文书
2014和解协议书范文
2014/09/15 职场文书
2014国庆节国旗下演讲稿(精选版)
2014/09/26 职场文书
社会实践活动报告
2015/02/05 职场文书
如何理解及使用Python闭包
2021/06/01 Python
工厂无线对讲系统解决方案
2022/02/18 无线电
Redis 哨兵机制及配置实现
2022/03/25 Redis