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 相关文章推荐
jscript之Open an Excel Spreadsheet
Jun 13 Javascript
基于jQuery的试卷自动排版系统实现代码
Jan 06 Javascript
基于jQuery的input输入框下拉提示层(自动邮箱后缀名)
Jun 14 Javascript
javascript教程之不完整的继承(js原型链)
Jan 13 Javascript
Javascript动态引用CSS文件的2种方法介绍
Jun 06 Javascript
JavaScript onkeydown事件入门实例(键盘某个按键被按下)
Oct 17 Javascript
IE6浏览器中window.location.href无效的解决方法
Nov 20 Javascript
JavaScript使用RegExp进行正则匹配的方法
Jul 11 Javascript
jquery append 动态添加的元素事件on 不起作用的解决方案
Jul 30 Javascript
js实现简易的单数字随机抽奖(0-9)
Mar 19 Javascript
vue 实现滚动到底部翻页效果(pc端)
Jul 31 Javascript
Javascript webpack动态import
Apr 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
使用sockets:从新闻组中获取文章(二)
2006/10/09 PHP
一步一步学习PHP(6) 面向对象
2010/02/16 PHP
php中替换字符串中的空格为逗号','的方法
2014/06/09 PHP
简介PHP的Yii框架中缓存的一些高级用法
2016/03/29 PHP
PHP之十六个魔术方法详细介绍
2016/11/01 PHP
checkbox 多选框 联动实现代码
2008/10/22 Javascript
在标题栏显示新消息提示,很多公司项目中用到这个方法
2011/11/04 Javascript
JavaScript 图像动画的小demo
2012/05/23 Javascript
jquery动态添加删除div 具体实现
2013/07/20 Javascript
node.js中的fs.futimesSync方法使用说明
2014/12/17 Javascript
原生javascript实现图片按钮切换
2015/01/12 Javascript
jQuery使用removeClass方法删除元素指定Class的方法
2015/03/26 Javascript
js全选按钮的实现方法
2015/11/17 Javascript
JS Array.slice 截取数组的实现方法
2016/01/02 Javascript
js中通过getElementsByName访问name集合对象的方法
2016/10/31 Javascript
使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条
2017/01/04 Javascript
react-router4 嵌套路由的使用方法
2017/07/24 Javascript
原生JS获取元素的位置与尺寸实现方法
2017/10/18 Javascript
详解vuex commit保存数据技巧
2018/12/25 Javascript
策略模式实现 Vue 动态表单验证的方法
2019/09/16 Javascript
python在linux中输出带颜色的文字的方法
2014/06/19 Python
零基础写python爬虫之urllib2使用指南
2014/11/05 Python
Python字符串切片操作知识详解
2016/03/28 Python
Python综合应用名片管理系统案例详解
2020/01/03 Python
浅谈python之自动化运维(Paramiko)
2020/01/31 Python
django 外键创建注意事项说明
2020/05/20 Python
Python如何在main中调用函数内的函数方式
2020/06/01 Python
在tensorflow实现直接读取网络的参数(weight and bias)的值
2020/06/24 Python
波兰电子产品购物网站:Vobis
2019/05/26 全球购物
Groupon法国官方网站:特卖和网上购物高达-70%
2019/09/02 全球购物
党校自我鉴定范文
2013/10/02 职场文书
移风易俗倡议书
2014/04/15 职场文书
三严三实学习心得体会(精选N篇)
2016/01/05 职场文书
大学生创业计划书
2019/06/24 职场文书
Hive导入csv文件示例
2022/06/25 数据库
Zabbix对Kafka topic积压数据监控的问题(bug优化)
2022/07/07 Servers