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 相关文章推荐
js判断登录与否并确定跳转页面的方法
Jan 30 Javascript
javascript实现的右下角弹窗实例
Apr 24 Javascript
javascript巧用eval函数组装表单输入项为json对象的方法
Nov 25 Javascript
Angularjs单选改为多选的开发过程及问题解析
Feb 17 Javascript
jQuery树插件zTree使用方法详解
May 02 jQuery
使用InstantClick.js让页面提前加载200ms
Sep 12 Javascript
Vue+Jwt+SpringBoot+Ldap完成登录认证的示例代码
May 21 Javascript
代码分析vue中如何配置less
Sep 28 Javascript
教你使用vue-cli快速构建的小说阅读器
May 13 Javascript
js之切换全屏和退出全屏实现代码实例
Sep 09 Javascript
javascript随机变色实例代码
Oct 15 Javascript
JS自定义右键菜单实现代码解析
Jul 16 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 session_start()出错原因分析及解决方法
2013/10/28 PHP
js实现简单模态窗口,背景灰显
2008/11/14 Javascript
Extjs 几个方法的讨论
2010/01/28 Javascript
jquery Moblie入门—hello world的示例代码学习
2013/01/08 Javascript
node.js中的socket.io入门实例
2014/04/26 Javascript
EasyUI实现二级页面的内容勾选的方法
2015/03/01 Javascript
asp.net+jquery.form实现图片异步上传的方法(附jquery.form.js下载)
2016/05/05 Javascript
jQuery easyUI datagrid 增加求和统计行的实现代码
2016/06/01 Javascript
jQuery基于toggle实现click触发DIV的显示与隐藏问题分析
2016/06/12 Javascript
用js读写cookie的简单方法(推荐)
2016/08/08 Javascript
JS百度地图搜索悬浮窗功能
2017/01/12 Javascript
Angular 2父子组件之间共享服务通信的实现
2017/07/04 Javascript
shiro授权的实现原理
2017/09/21 Javascript
基于angular6.0实现的一个组件懒加载功能示例
2018/04/12 Javascript
详解vue中this.$emit()的返回值是什么
2019/04/07 Javascript
基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)
2019/05/07 Javascript
Python实现合并两个列表的方法分析
2018/05/28 Python
Python之csv文件从MySQL数据库导入导出的方法
2018/06/21 Python
使用python语言,比较两个字符串是否相同的实例
2018/06/29 Python
Python基础学习之类与实例基本用法与注意事项详解
2019/06/17 Python
在PyCharm的 Terminal(终端)切换Python版本的方法
2019/08/02 Python
自定义django admin model表单提交的例子
2019/08/23 Python
python批量处理txt文件的实例代码
2020/01/13 Python
Python基于gevent实现文件字符串查找器
2020/08/11 Python
用gpu训练好的神经网络,用tensorflow-cpu跑出错的原因及解决方案
2021/03/03 Python
使用HTML5的表单验证的简单示例
2015/09/09 HTML / CSS
德国苹果商店:MacTrade
2020/05/18 全球购物
成人毕业生自我鉴定
2013/10/18 职场文书
服装机修工岗位职责
2013/12/26 职场文书
四个太阳教学反思
2014/02/01 职场文书
医学生自荐信范文
2015/03/05 职场文书
2015年酒店销售部工作总结
2015/07/24 职场文书
班主任寄语2016
2015/12/04 职场文书
文明和谐家庭事迹材料(2016精选版)
2016/02/29 职场文书
解析MySQL索引的作用
2022/03/03 MySQL
实战 快速定位MySQL的慢SQL
2022/03/22 MySQL