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 相关文章推荐
DWR Ext 加载数据
Mar 22 Javascript
javascript AutoScroller 函数类
May 29 Javascript
《JavaScript高级程序设计》阅读笔记(三) ECMAScript中的引用类型
Feb 27 Javascript
jquery 实现密码框的显示与隐藏示例代码
Sep 18 Javascript
jquery实现弹出层完美居中效果
Mar 03 Javascript
jQuery淡入淡出元素让其效果更为生动
Sep 01 Javascript
$.extend 的一个小问题
Jun 18 Javascript
Vue.js每天必学之过渡与动画
Sep 06 Javascript
基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)
Nov 02 Javascript
JS简单获取并修改input文本框内容的方法示例
Apr 08 Javascript
js中对象和面向对象与Json介绍
Jan 21 Javascript
记一次vue-webpack项目优化实践详解
Feb 17 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数组操作
2011/12/30 PHP
php实现字符串首字母大写和单词首字母大写的方法
2015/03/14 PHP
php使用PDO下exec()函数查询执行后受影响行数的方法
2017/03/28 PHP
JS+CSS 制作的超级简单的下拉菜单附图
2013/11/22 Javascript
巧用replace将文字表情替换为图片
2014/04/17 Javascript
一个不错的字符串转码解码函数(自写)
2014/07/31 Javascript
jquery实现submit提交表单
2015/02/03 Javascript
jQuery获取file控件中图片的宽高与大小
2016/08/04 Javascript
AngularJS通过$location获取及改变当前页面的URL
2016/09/23 Javascript
javascript函数的四种调用模式
2017/01/08 Javascript
前端跨域的几种解决方式总结(推荐)
2017/08/16 Javascript
浅谈webpack 构建性能优化策略小结
2018/06/13 Javascript
vue中后端做Excel导出功能返回数据流前端的处理操作
2020/09/08 Javascript
python sys模块sys.path使用方法示例
2013/12/04 Python
在Python中使用__slots__方法的详细教程
2015/04/28 Python
用Python编写web API的教程
2015/04/30 Python
详解Django缓存处理中Vary头部的使用
2015/07/24 Python
浅谈Python生成器generator之next和send的运行流程(详解)
2017/05/08 Python
Python2.7编程中SQLite3基本操作方法示例
2017/08/09 Python
对pandas的算术运算和数据对齐实例详解
2018/12/22 Python
python实现定时发送qq消息
2019/01/18 Python
我喜欢你 抖音表白程序python版
2019/04/07 Python
Python面向对象之类和实例用法分析
2019/06/08 Python
Python yield生成器和return对比代码实例
2020/04/20 Python
Python Dataframe常见索引方式详解
2020/05/27 Python
python3代码输出嵌套式对象实例详解
2020/12/03 Python
简单掌握CSS3中resize属性的用法
2016/04/01 HTML / CSS
购买大码女装:Lane Bryant
2016/09/07 全球购物
网络工程与软件技术毕业生自荐信
2013/09/24 职场文书
《春天来了》教学反思
2014/04/07 职场文书
离婚协议书的书写要求
2014/09/17 职场文书
党的群众路线教育实践活动学习笔记范文
2014/11/06 职场文书
客户付款通知书
2015/04/23 职场文书
余世维讲座观后感
2015/06/11 职场文书
思品教学工作总结
2015/08/10 职场文书
MySQL 8.0 之不可见列的基本操作
2021/05/20 MySQL