jQuery ajax serialize() 方法使用示例


Posted in Javascript onNovember 02, 2014

.serialize() 方法创建以标准 URL 编码表示的文本字符串。它的操作对象是代表表单元素集合的 jQuery 对象。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> 
<script type="text/jscript"> 
// $(function () { 
// alert($("form").serialize()); 
// }) 

function btnClick() { 
alert($("form").serialize()); 
} 
</script> 
</head> 
<body> 
<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="button" name="g" value="提交" id="g" onclick="btnClick()" /> 
</div> 
</form> 

</body> 
</html><span style="font-size:18px;color:#ff0000;"> 
</span>

点击提交:

输出标准的查询字符串:a=1&b=2&c=3&d=4&e=5

如果将复选框也选上的话 输出的就是:a=1&b=2&c=3&d=4&e=5&f=8

Javascript 相关文章推荐
使用Jquery Aajx访问WCF服务(GET、POST、PUT、DELETE)
Mar 16 Javascript
直接拿来用的15个jQuery代码片段
Sep 23 Javascript
JavaScript判断数组重复内容的两种方法(推荐)
Jun 06 Javascript
javascript如何定义对象数组
Jun 07 Javascript
ES6新特性五:Set与Map的数据结构实例分析
Apr 21 Javascript
javascript 初学教程及五子棋小程序的简单实现
Jul 04 Javascript
jQuery.Sumoselect插件实现下拉复选框效果
Nov 09 jQuery
webpack源码之loader机制详解
Apr 06 Javascript
微信小程序引用iconfont图标的方法
Oct 22 Javascript
vue项目移动端实现ip输入框问题
Mar 19 Javascript
微信小程序全局变量改变监听的实现方法
Jul 15 Javascript
浅谈如何优雅处理JavaScript异步错误
Nov 12 Javascript
js获取UserControl内容为拼html时提供方便
Nov 02 #Javascript
Javscript调用iframe框架页面中函数的方法
Nov 01 #Javascript
js实现文章文字大小字号功能完整实例
Nov 01 #Javascript
js中confirm实现执行操作前弹出确认框的方法
Nov 01 #Javascript
js实现按钮加背景图片常用方法
Nov 01 #Javascript
js实现网页随机切换背景图片的方法
Nov 01 #Javascript
JS获取浏览器语言动态加载JS文件示例代码
Oct 31 #Javascript
You might like
DedeCMS 核心类TypeLink.class.php摘要笔记
2010/04/07 PHP
php字符串的替换,分割和连接方法
2016/05/23 PHP
浅谈PHP发送HTTP请求的几种方式
2017/07/25 PHP
PHP7生产环境队列Beanstalkd用法详解
2020/05/19 PHP
Jquery工作常用实例 使用AJAX使网页进行异步更新
2011/07/26 Javascript
jquery快捷动态绑定键盘事件的操作函数代码
2013/10/17 Javascript
Js实现网页键盘控制翻页的方法
2014/10/30 Javascript
DOM基础教程之模型中的模型节点
2015/01/19 Javascript
jQuery表格行上移下移和置顶的实现方法
2015/10/08 Javascript
jQuery实现的图片轮播效果完整示例
2016/09/12 Javascript
JavaScript实现时间表动态效果
2017/07/15 Javascript
vue双向数据绑定知识点总结
2018/04/18 Javascript
详解JavaScript事件循环机制
2018/09/07 Javascript
vue router 传参获取不到的解决方式
2019/11/13 Javascript
javascript实现商品图片放大镜
2019/11/28 Javascript
vue使用video插件vue-video-player详解
2020/10/23 Javascript
分享一下Python数据分析常用的8款工具
2018/04/29 Python
Python读取本地文件并解析网页元素的方法
2018/05/21 Python
使用Django连接Mysql数据库步骤
2019/01/15 Python
Pandas时间序列重采样(resample)方法中closed、label的作用详解
2019/12/10 Python
python内打印变量之%和f的实例
2020/02/19 Python
HTML5教程之html 5 本地数据库(Web Sql Database)
2014/04/03 HTML / CSS
浅谈HTML5 Web Worker的使用
2018/01/05 HTML / CSS
Ootori在线按摩椅店:一家专业的按摩椅制造商
2019/04/10 全球购物
美国巧克力喷泉品牌:Sephra
2019/05/05 全球购物
预订旅游活动、景点和旅游:GetYourGuide
2019/09/29 全球购物
main 函数执行以前,还会执行什么代码
2013/04/17 面试题
C语言变量的命名规则都有哪些
2013/12/27 面试题
shell程序中如何注释
2012/01/28 面试题
大学生职业生涯规划书模版
2013/12/30 职场文书
毕业生就业推荐表自我鉴定
2014/03/20 职场文书
法律专业大学生职业生涯规划书:向目标一步步迈进
2014/09/22 职场文书
再婚婚前财产协议书范本
2014/10/19 职场文书
党员自我评价2015
2015/03/03 职场文书
2015年保险公司工作总结
2015/04/24 职场文书
Windows Server 2016服务器用户管理及远程授权图文教程
2022/08/14 Servers