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 读取xml,写入xml 实现代码
Jul 10 Javascript
Jquery 改变radio/checkbox选中状态,获取选中的值(示例代码)
Dec 12 Javascript
Jquery Ajax解析XML数据(同步及异步调用)简单实例
Feb 12 Javascript
JavaScript字符串对象toLowerCase方法入门实例(用于把字母转换为小写)
Oct 17 Javascript
AngularJS学习笔记之ng-options指令
Jun 16 Javascript
jQuery调用WebMethod(PageMethod) NET2.0的方法
Apr 15 Javascript
js实现漫天星星效果
Jan 19 Javascript
div中文字内容溢出常见的解决方法
Mar 16 Javascript
javascriptvoid(0)含义以及与&quot;#&quot;的区别讲解
Jan 19 Javascript
微信小程序实现的自定义分享功能示例
Feb 12 Javascript
通过实例学习React中事件节流防抖
Jun 17 Javascript
vue用BMap百度地图实现即时搜索功能
Sep 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
1 Tube Radio
2021/03/02 无线电
php 代码优化的42条建议 推荐
2009/09/25 PHP
PHP中Date()时间日期函数的使用方法小结
2011/04/20 PHP
微信公众平台消息接口校验与消息接口响应实例
2014/12/23 PHP
Mac系统下使用brew搭建PHP(LNMP/LAMP)开发环境
2015/03/03 PHP
PHP Cookei记录用户历史浏览信息的代码
2016/02/03 PHP
thinkphp3.2实现在线留言提交验证码功能
2017/07/19 PHP
PHP使用pdo实现事务处理操作示例
2018/09/05 PHP
9个javascript语法高亮插件 推荐
2009/07/18 Javascript
Javascript new关键字的玄机 以及其它
2010/08/25 Javascript
jQuery.prototype.init选择器构造函数源码思路分析
2013/02/05 Javascript
js实现的点击数量加一可操作数据库
2014/05/09 Javascript
JS+CSS实现另类带提示效果的竖向导航菜单
2015/10/15 Javascript
java必学必会之static关键字
2015/12/03 Javascript
简单的渐变轮播插件
2017/01/12 Javascript
简单理解Vue中的nextTick方法
2018/01/30 Javascript
Python编写屏幕截图程序方法
2015/02/18 Python
Python 列表排序方法reverse、sort、sorted详解
2016/01/22 Python
Python中用psycopg2模块操作PostgreSQL方法
2017/11/28 Python
python脚本作为Windows服务启动代码详解
2018/02/11 Python
Python把对应格式的csv文件转换成字典类型存储脚本的方法
2019/02/12 Python
python实现扫描局域网指定网段ip的方法
2019/04/16 Python
Python参数传递及收集机制原理解析
2020/06/05 Python
Tensorflow中批量读取数据的案列分析及TFRecord文件的打包与读取
2020/06/30 Python
python3实现将json对象存入Redis以及数据的导入导出
2020/07/16 Python
Django用户认证系统如何实现自定义
2020/11/12 Python
python如何获得list或numpy数组中最大元素对应的索引
2020/11/16 Python
今天学到的CSS最新技术(与图片背景相关)
2012/12/24 HTML / CSS
日本民宿预约平台:STAY JAPAN
2017/07/01 全球购物
行政部岗位职责范本
2014/03/13 职场文书
《音乐之都维也纳》教学反思
2014/04/16 职场文书
春节联欢会策划方案
2014/05/16 职场文书
2014年端午节演讲稿范文
2014/05/23 职场文书
2014年学校工会工作总结
2014/12/06 职场文书
python绘制简单直方图(质量分布图)的方法
2022/04/21 Python
python实现双链表
2022/05/25 Python