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 禁止复制网页
Jun 11 Javascript
Easy.Ajax 部分源代码 支持文件上传功能, 兼容所有主流浏览器
Feb 24 Javascript
jquery blockUI 遮罩不能消失与不能提交的解决方法
Sep 17 Javascript
js中通过split函数分割字符串成数组小例子
Sep 21 Javascript
js中style.display=&quot;&quot;无效的解决方法
Oct 30 Javascript
JavaScript中setMonth()方法的使用详解
Jun 11 Javascript
基于jQuery实现多标签页切换的效果(web前端开发)
Jul 24 Javascript
利用JS如何计算字符串所占字节数示例代码
Sep 13 Javascript
vue-router路由与页面间导航实例解析
Nov 07 Javascript
原生js实现3D轮播图
Mar 21 Javascript
JS实现多选框的操作
Jun 24 Javascript
js 函数性能比较方法
Aug 24 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加速 eAccelerator配置和使用指南
2009/06/05 PHP
超级简单的php+mysql留言本源码
2009/11/11 PHP
php学习之数据类型之间的转换代码
2011/05/29 PHP
深入Nginx + PHP 缓存详解
2013/07/11 PHP
php中使用websocket详解
2016/09/23 PHP
动态表单验证的操作方法和TP框架里面的ajax表单验证
2017/07/19 PHP
Laravel中正确地返回HTTP状态码方法示例
2019/09/10 PHP
Javascript 去除数组的重复元素
2010/05/04 Javascript
JS实现在Repeater控件中创建可隐藏区域的代码
2010/09/16 Javascript
js对象的构造和继承实现代码
2010/12/05 Javascript
JavaScript创建类/对象的几种方式概述及实例
2013/05/06 Javascript
详解JavaScript函数绑定
2013/08/18 Javascript
IE6中链接A的href为javascript协议时不在当前页面跳转
2014/06/05 Javascript
学习使用bootstrap基本控件(table、form、button)
2016/04/12 Javascript
jQuery unbind 删除绑定事件详解
2016/05/24 Javascript
JS使用cookie设置样式的方法
2016/06/30 Javascript
ES6新特性之Object的变化分析
2017/03/31 Javascript
Ajax验证用户名或昵称是否已被注册
2017/04/05 Javascript
Angular.js ng-file-upload结合springMVC的使用教程
2017/07/10 Javascript
windows系统下更新nodejs版本的方案
2017/11/24 NodeJs
element ui里dialog关闭后清除验证条件方法
2018/02/26 Javascript
浅谈Postman解决token传参的问题
2018/03/31 Javascript
vue.js 打包时出现空白页和路径错误问题及解决方法
2019/06/26 Javascript
vue 解决addRoutes多次添加路由重复的操作
2020/08/04 Javascript
Python应用领域和就业形势分析总结
2019/05/14 Python
python opencv对图像进行旋转且不裁剪图片的实现方法
2019/07/09 Python
美国诺德斯特龙百货官网:Nordstrom
2016/08/23 全球购物
阿联酋航空官方网站:Emirates
2017/10/17 全球购物
酒店总经理工作职责
2013/12/13 职场文书
德育标兵事迹材料
2014/08/24 职场文书
2015年新学期寄语
2015/02/26 职场文书
2015年公司工作总结
2015/04/25 职场文书
小学2016年“我们的节日·重阳节”活动总结
2016/04/01 职场文书
《暗黑破坏神2:重制版》本周进行第一轮A测 目前可官网进行申请报名
2021/04/07 其他游戏
vue+springboot实现登录验证码
2021/05/27 Vue.js
《勇者辞职不干了》ED主题曲无字幕动画MV公开
2022/04/13 日漫