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 相关文章推荐
filemanage功能中用到的common.js
Apr 08 Javascript
js函数般调用正则
Apr 08 Javascript
Javascript 去除数组的重复元素
May 04 Javascript
setInterval,setTimeout与jquery混用的问题
Apr 08 Javascript
使用firebug进行调试javascript的示例
Dec 16 Javascript
json中换行符的处理方法示例介绍
Jun 10 Javascript
JQuery中的html()、text()、val()区别示例介绍
Sep 01 Javascript
jquery事件与绑定事件
Mar 16 Javascript
JS实现动态给标签控件添加事件的方法示例
May 13 Javascript
JavaScript实现邮箱后缀提示功能的示例代码
Dec 13 Javascript
在JavaScript中使用严格模式(Strict Mode)
Jun 13 Javascript
微信小程序使用GoEasy实现websocket实时通讯
May 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服务器实现多session并发运行
2006/10/09 PHP
php删除与复制文件夹及其文件夹下所有文件的实现代码
2013/01/23 PHP
php中运用http调用的GET和POST方法示例
2014/09/29 PHP
Aster vs Newbee BO5 第一场2.19
2021/03/10 DOTA
番茄的表单验证类代码修改版
2008/07/18 Javascript
js控制的遮罩层实例介绍
2013/05/29 Javascript
jquery创建表格(自动增加表格)代码分享
2013/12/25 Javascript
js控制分页打印、打印分页示例
2014/02/08 Javascript
如何用jQuery实现ASP.NET GridView折叠伸展效果
2015/09/26 Javascript
Highcharts学习之坐标轴
2016/08/02 Javascript
JS实现动态增加和删除li标签行的实例代码
2016/10/16 Javascript
微信小程序 MINA文件结构
2016/10/17 Javascript
探究Vue.js 2.0新增的虚拟DOM
2016/10/20 Javascript
用Angular实时获取本地Localstorage数据,实现一个模拟后台数据登入的效果
2016/11/09 Javascript
微信小程序实现循环动画效果
2018/07/16 Javascript
JavaScript Dom实现轮播图原理和实例
2021/02/19 Javascript
在Windows服务器下用Apache和mod_wsgi配置Python应用的教程
2015/05/06 Python
Python实现批量转换文件编码的方法
2015/07/28 Python
Python内置函数delattr的具体用法
2017/11/23 Python
selenium+python实现自动登录脚本
2018/04/22 Python
tensorflow1.0学习之模型的保存与恢复(Saver)
2018/04/23 Python
python 用lambda函数替换for循环的方法
2018/06/09 Python
Python使用matplotlib绘制随机漫步图
2018/08/27 Python
python中类的属性和方法介绍
2018/11/27 Python
pycharm设置鼠标悬停查看方法设置
2019/07/29 Python
PyQt5 界面显示无响应的实现
2020/03/26 Python
美国社交购物市场:MassGenie
2019/02/18 全球购物
vue 中 get / delete 传递数组参数方法
2021/03/23 Vue.js
自荐书模板
2013/12/15 职场文书
给老师的道歉信
2014/01/11 职场文书
新法人代表任命书
2014/06/06 职场文书
学风建设演讲稿
2014/09/12 职场文书
小数乘法教学反思
2016/02/22 职场文书
MySQL创建索引需要了解的
2021/04/08 MySQL
在项目中使用redis做缓存的一些思路
2021/09/14 Redis
Android使用EventBus发送消息,Fragment中接收消息的方法会执行多次
2022/04/24 Java/Android