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 相关文章推荐
各种效果的jquery ui(接口)介绍
Sep 17 Javascript
让iframe子窗体取父窗体地址栏参数(querystring)
Oct 13 Javascript
javascript获取url上某个参数的方法
Nov 08 Javascript
在Iframe中获取父窗口中表单的值(示例代码)
Nov 22 Javascript
基于jquery实现动态竖向柱状条特效
Feb 12 Javascript
深入理解JS addLoadEvent函数
May 20 Javascript
JavaScript学习笔记整理_简单实现枚举类型,扑克牌应用
Sep 19 Javascript
vue2.0 与 bootstrap datetimepicker的结合使用实例
May 22 Javascript
cropper js基于vue的图片裁剪上传功能的实现代码
Mar 01 Javascript
JavaScript代码异常监控实现过程详解
Feb 17 Javascript
vue搜索页开发实例代码详解(热门搜索,历史搜索,淘宝接口演示)
Apr 11 Javascript
详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)
Jul 11 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
elgg 获取文件图标地址的方法
2010/03/20 PHP
PHP对文件进行加锁、解锁实例
2015/01/23 PHP
Symfony2学习笔记之模板用法详解
2016/03/17 PHP
php有效防止图片盗用、盗链的两种方法
2016/11/01 PHP
php获取数据库中数据的实现方法
2017/06/01 PHP
php使用fputcsv实现大数据的导出操作详解
2020/02/27 PHP
用javascript实现分割提取页面所需内容
2007/05/09 Javascript
js获取html文件的思路及示例
2013/09/17 Javascript
Bootstrap下拉菜单效果实例代码分享
2016/06/30 Javascript
深入理解JS正则表达式---分组
2016/07/18 Javascript
浅谈在js传递参数中含加号(+)的处理方式
2016/10/11 Javascript
js实现弹窗暗层效果
2017/01/16 Javascript
js获取html页面代码中图片地址的实现代码
2018/03/05 Javascript
Django+vue跨域问题解决的详细步骤
2019/01/20 Javascript
微信小程序template模版的使用方法
2019/04/13 Javascript
使用layui前端框架弹出form表单以及提交的示例
2019/10/25 Javascript
VUE.CLI4.0配置多页面入口的实现
2019/11/25 Javascript
完美解决vue 中多个echarts图表自适应的问题
2020/07/19 Javascript
vue中el-input绑定键盘按键(按键修饰符)
2020/07/22 Javascript
javascript实现京东快递单号的查询效果
2020/11/30 Javascript
使用Python来编写HTTP服务器的超级指南
2016/02/18 Python
Python-嵌套列表list的全面解析
2016/06/08 Python
Python爬虫爬取美剧网站的实现代码
2016/09/03 Python
Django 浅谈根据配置生成SQL语句的问题
2018/05/29 Python
Python中三元表达式的几种写法介绍
2019/03/04 Python
python计算n的阶乘的方法代码
2019/10/25 Python
使用 Python 清理收藏夹里已失效的网站
2019/12/03 Python
Python3 hashlib密码散列算法原理详解
2020/03/30 Python
Python 调用 ES、Solr、Phoenix的示例代码
2020/11/23 Python
如何使用html5与css3完成google涂鸦动画
2012/12/16 HTML / CSS
网上常见的一份Linux面试题(多项选择部分)
2014/09/09 面试题
环境工程大学生自荐信
2013/10/21 职场文书
试用期员工考核制度
2014/01/22 职场文书
计算机教师工作总结
2015/08/13 职场文书
十大冰系宝可梦排名,颜值最高的阿罗拉九尾,第三使用率第一
2022/03/18 日漫
纯CSS打字动画的实现示例
2022/08/05 HTML / CSS