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常用方法、属性集合及NodeList 和 HTMLCollection 的浏览器差异
Dec 25 Javascript
怎样在JavaScript里写一个swing把数据插入数据库
Dec 10 Javascript
JQuery操作三大控件(下拉,单选,复选)的方法
Aug 06 Javascript
JavaScript作用域链示例分享
May 27 Javascript
js获取时间并实现字符串和时间戳之间的转换
Jan 05 Javascript
Bootstrap实现带动画过渡的弹出框
Aug 09 Javascript
js Canvas绘制圆形时钟教程
Feb 06 Javascript
javaScript实现复选框全选反选事件详解
Nov 20 Javascript
vue mint-ui学习笔记之picker的使用
Oct 11 Javascript
jquery获取transform里的值实现方法
Dec 12 jQuery
webpack4 入门最简单的例子介绍
Sep 05 Javascript
vue-router之解决addRoutes使用遇到的坑
Jul 19 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代码中使用换行及(\n或\r\n和br)的应用
2013/02/02 PHP
PHP中HTML标签过滤技巧
2014/01/07 PHP
php构造函数的继承方法
2015/02/09 PHP
浅谈php和js中json的编码和解码
2016/10/24 PHP
php7 list()、session及其他模块的修改实例分析
2020/05/25 PHP
javascript 鼠标悬浮图片显示原图 移出鼠标后原图消失(多图)
2009/12/28 Javascript
JS 按钮点击触发(兼容IE、火狐)
2013/08/07 Javascript
jQuery选择器中含有空格的使用示例及注意事项
2013/08/25 Javascript
jQuery实现的支持IE的html滑动条
2015/03/16 Javascript
纯JS实现旋转图片3D展示效果
2015/04/12 Javascript
超实用的JavaScript代码段 附使用方法
2016/05/22 Javascript
深入理解逻辑表达式的用法 与或非的用法
2016/06/06 Javascript
javaScript嗅探执行神器-sniffer.js
2017/02/14 Javascript
js实现倒计时效果(小于10补零)
2017/03/08 Javascript
javascript checkbox/radio onchange不能兼容ie8处理办法
2017/06/13 Javascript
Easyui使用Dialog行内按钮布局的实例
2017/07/27 Javascript
使用vue-cli创建项目的图文教程(新手入门篇)
2018/05/02 Javascript
对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍
2018/08/30 Javascript
[02:40]2018年度DOTA2最佳新人-完美盛典
2018/12/16 DOTA
Python的Django中django-userena组件的简单使用教程
2015/05/30 Python
Python Queue模块详细介绍及实例
2016/12/27 Python
Python爬虫框架Scrapy常用命令总结
2018/07/26 Python
基于pycharm导入模块显示不存在的解决方法
2018/10/13 Python
python协程之动态添加任务的方法
2019/02/19 Python
PyTorch之nn.ReLU与F.ReLU的区别介绍
2020/06/27 Python
使用python把xmind转换成excel测试用例的实现代码
2020/10/12 Python
中国酒类在线零售网站:酒仙网
2016/08/20 全球购物
北美三大旅游网站之一:Travelocity加拿大
2016/08/20 全球购物
小米旗下精品生活电商平台:小米有品
2018/12/18 全球购物
EJB的基本架构
2016/09/22 面试题
视光学毕业生自荐书范文
2014/02/13 职场文书
春季防火方案
2014/05/10 职场文书
买卖合同纠纷代理词
2015/05/25 职场文书
运动会闭幕式主持词
2015/07/01 职场文书
怎样写好演讲稿题目?
2019/08/21 职场文书
Windows 64位 安装 mysql 8.0.28 图文教程
2022/04/19 MySQL