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 $.data()方法使用注意细节
Dec 31 Javascript
javascript简单实现图片预加载
Dec 03 Javascript
javascript文本模板用法实例
Jul 31 Javascript
JQuery解析XML的方法小结
Apr 02 Javascript
AngularJS中关于ng-class指令的几种实现方式详解
Sep 17 Javascript
微信公众平台开发教程(五)详解自定义菜单
Dec 02 Javascript
用v-html解决Vue.js渲染中html标签不被解析的问题
Dec 14 Javascript
详解React中合并单元格的正确写法
Jan 08 Javascript
js实现移动端吸顶效果
Jan 08 Javascript
阿望教你用vue写扫雷小游戏
Jan 20 Javascript
javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法
May 14 Javascript
React实现动效弹窗组件
Jun 21 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函数
2006/10/09 PHP
中篇:安装及配置PHP
2006/12/13 PHP
PHP将整个网站生成HTML纯静态网页的方法总结
2012/02/05 PHP
php提交表单发送邮件的方法
2015/03/20 PHP
Codeigniter控制器controller继承问题实例分析
2016/01/19 PHP
JavaScript prototype属性使用说明
2010/05/13 Javascript
js简单的弹出框有关闭按钮
2014/05/05 Javascript
JavaScript判断textarea值是否为空并给出相应提示
2014/09/04 Javascript
怎么限制input的text里输入的值只能是数字(正则、js)
2016/05/16 Javascript
nodejs读写json文件的简单方法(必看)
2017/03/09 NodeJs
详解vue数据渲染出现闪烁问题
2017/06/29 Javascript
nginx+vue.js实现前后端分离的示例代码
2018/02/12 Javascript
浅谈高大上的微信小程序中渲染html内容—技术分享
2018/10/25 Javascript
JS document文档的简单操作完整示例
2020/01/13 Javascript
Python实现识别图片内容的方法分析
2018/07/11 Python
浅谈PYTHON 关于文件的操作
2019/03/19 Python
anaconda中更改python版本的方法步骤
2019/07/14 Python
python pillow模块使用方法详解
2019/08/30 Python
TensorFlow Saver:保存和读取模型参数.ckpt实例
2020/02/10 Python
Python virtualenv虚拟环境实现过程解析
2020/04/18 Python
如何利用Python给自己的头像加一个小国旗(小月饼)
2020/10/02 Python
CSS实现鼠标滑过鼠标点击代码写法
2016/12/26 HTML / CSS
室内设计自我鉴定
2013/10/15 职场文书
合同专员岗位职责
2013/12/18 职场文书
监理资料员岗位职责
2014/01/03 职场文书
2014大学生全国两会学习心得体会
2014/03/13 职场文书
初二学习计划书范文
2014/04/27 职场文书
《周恩来的四个昼夜》观后思想汇报范文两篇
2014/09/10 职场文书
村主任群众路线教育实践活动个人对照检查材料思想汇报
2014/10/01 职场文书
学习十八大标语
2014/10/09 职场文书
美术教师求职信范文
2015/03/20 职场文书
2016年大学迎新晚会工作总结
2015/10/15 职场文书
vue3如何优雅的实现移动端登录注册模块
2021/03/29 Vue.js
go语言中json数据的读取和写出操作
2021/04/28 Golang
Mysql数据库命令大全
2021/05/26 MySQL
在ubuntu下安装go开发环境的全过程
2022/08/05 Golang