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 tab标签页的制作
May 10 Javascript
通过正则格式化url查询字符串实现代码
Dec 28 Javascript
JavaScript判断变量是否为undefined的两种写法区别
Dec 04 Javascript
JS按回车键实现登录的方法
Aug 25 Javascript
详细分析JavaScript变量类型
Jul 08 Javascript
jQuery+AJAX实现遮罩层登录验证界面(附源码)
Sep 13 Javascript
JS高级运动实例分析
Dec 20 Javascript
浅谈Angular路由复用策略
Oct 04 Javascript
基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍
Aug 24 Javascript
用jQuery将JavaScript对象转换为querystring查询字符串的方法
Nov 12 jQuery
Three.js实现3D机房效果
Dec 30 Javascript
原生js实现放大镜组件
Jan 22 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可能遇到的问题“无法载入mysql扩展” 的解决方法
2007/04/16 PHP
PHP开发中常用的字符串操作函数
2011/02/08 PHP
php中数字0和空值的区别分析
2014/06/05 PHP
PHP简单操作MongoDB的方法(安装及增删改查)
2016/05/26 PHP
广告代码静态化js通用函数
2007/05/09 Javascript
JQuery中dataGrid设置行的高度示例代码
2014/01/03 Javascript
JavaScript中获取高度和宽度函数总结
2014/10/08 Javascript
jQuery中noConflict()用法实例分析
2015/02/08 Javascript
jfinal与bootstrap的登录跳转实战演习
2015/09/22 Javascript
JavaScript实现点击文本自动定位到下拉框选中操作
2016/06/15 Javascript
Linux使用Node.js建立访问静态网页的服务实例详解
2017/03/21 Javascript
vue表单绑定实现多选框和下拉列表的实例
2017/08/12 Javascript
Vue.js 踩坑记之双向绑定
2018/05/03 Javascript
详解webpack 热更新优化
2018/09/13 Javascript
浅谈Angular7 项目开发总结
2018/12/19 Javascript
基于three.js实现的3D粒子动效实例代码
2019/04/09 Javascript
JS实现从对象获取对象中单个键值的方法示例
2019/06/05 Javascript
vue 使用高德地图vue-amap组件过程解析
2019/09/07 Javascript
JavaScript实现手机号码 3-4-4格式并控制新增和删除时光标的位置
2020/06/02 Javascript
swiper自定义分页器的样式
2020/09/14 Javascript
python函数缺省值与引用学习笔记分享
2013/02/10 Python
Python实现网络端口转发和重定向的方法
2016/09/19 Python
Python中运算符&quot;==&quot;和&quot;is&quot;的详解
2016/10/08 Python
解决uWSGI的编码问题详解
2017/03/24 Python
python对配置文件.ini进行增删改查操作的方法示例
2017/07/28 Python
python中kmeans聚类实现代码
2018/02/23 Python
在Python中如何传递任意数量的实参的示例代码
2019/03/21 Python
Python 实现微信防撤回功能
2019/04/29 Python
关于numpy.where()函数 返回值的解释
2019/12/06 Python
HTML5 video循环播放多个视频的方法步骤
2020/08/06 HTML / CSS
英国评分最高的女性剃须刀订阅盒:FFS Beauty
2018/01/25 全球购物
IRO美国官网:法国服装品牌
2018/03/06 全球购物
奶茶店创业计划书范文
2014/01/17 职场文书
致铅球运动员加油稿
2014/02/13 职场文书
党员干部反四风对照检查材料思想汇报
2014/09/14 职场文书
解决 Redis 秒杀超卖场景的高并发
2022/04/12 Redis