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 相关文章推荐
学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)
Mar 10 Javascript
Jquery 1.42 checkbox 全选和反选代码
Mar 27 Javascript
Dom在ajax技术中的作用说明
Oct 25 Javascript
JavaScript 异常处理 详解
Feb 06 Javascript
Bootstrap Fileinput文件上传组件用法详解
May 10 Javascript
Bootstrap弹出框(modal)垂直居中的问题及解决方案详解
Jun 12 Javascript
基于JavaScript实现全选、不选和反选效果
Feb 15 Javascript
jquery实现回车键触发事件(实例讲解)
Nov 21 jQuery
基于jQuery实现的设置文本区域的光标位置
Jun 15 jQuery
Vue匿名插槽与作用域插槽的合并和覆盖行为
Apr 22 Javascript
vue实现移动端图片上传功能
Dec 23 Javascript
前端JavaScript大管家 package.json
Nov 02 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
header()函数使用说明
2006/11/23 PHP
Zend Framework入门教程之Zend_View组件用法示例
2016/12/09 PHP
Yii输入正确验证码却验证失败的解决方法
2017/06/06 PHP
textarea的value是html文件源代码,存成html文件的代码
2007/04/20 Javascript
jquery getScript动态加载JS方法改进详解
2012/11/15 Javascript
javascript实现表格排序 编辑 拖拽 缩放
2015/01/02 Javascript
js与jquery实时监听输入框值的oninput与onpropertychange方法
2015/02/05 Javascript
利用JavaScript阻止表单提交的两种方法
2016/08/11 Javascript
jQuery中animate的几种用法与注意事项
2016/12/12 Javascript
Angular ng-repeat遍历渲染完页面后执行其他操作详细介绍
2016/12/13 Javascript
js实现楼层导航功能
2017/02/23 Javascript
VUE axios上传图片到七牛的实例代码
2017/07/28 Javascript
jQuery实现的弹幕效果完整实例
2017/09/06 jQuery
chorme 浏览器记住密码后input黄色背景处理方法(两种)
2017/11/22 Javascript
从零开始最小实现react服务器渲染详解
2018/01/26 Javascript
微信小程序实现手势图案锁屏功能
2018/01/30 Javascript
vue使用vue-i18n实现国际化的实现代码
2018/04/08 Javascript
微信小程序module.exports模块化操作实例浅析
2018/12/20 Javascript
微信小程序实现form表单本地储存数据
2019/06/27 Javascript
中高级前端必须了解的JS中的内存管理(推荐)
2019/07/04 Javascript
vue父子模板传值问题解决方法案例分析
2020/02/26 Javascript
Python文本统计功能之西游记用字统计操作示例
2018/05/07 Python
python+numpy按行求一个二维数组的最大值方法
2019/07/09 Python
浅谈python已知元素,获取元素索引(numpy,pandas)
2019/11/26 Python
Python气泡提示与标签的实现
2020/04/01 Python
使用keras实现BiLSTM+CNN+CRF文字标记NER
2020/06/29 Python
德国旅行、体验和活动的预订平台:Watado
2019/12/04 全球购物
家乐福台湾线上购物网:Carrefour台湾
2020/09/15 全球购物
优秀大学生推荐信范文
2013/11/28 职场文书
工厂保洁员岗位职责
2013/12/04 职场文书
办公室助理岗位职责
2013/12/25 职场文书
护士长2014年终工作总结
2014/11/11 职场文书
团组织推荐意见
2015/06/05 职场文书
离婚协议书范本(2016最新版)
2016/03/18 职场文书
2016年学校爱国卫生月活动总结
2016/04/06 职场文书
java代码实现空间切割
2022/01/18 Java/Android