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 相关文章推荐
JavaScript 中的事件教程
Apr 05 Javascript
js实现网页倒计时、网站已运行时间功能的代码3例
Apr 14 Javascript
jquery 中ajax执行的优先级
Jun 22 Javascript
JavaScript作用域示例详解
Jul 07 Javascript
jQuery动态生成不规则表格(前后端)
Feb 21 Javascript
JavaScript实现星星等级评价功能
Mar 22 Javascript
微信小程序 flex实现导航实例详解
Apr 26 Javascript
Vue 2.5 Level E 发布了: 新功能特性一览
Oct 24 Javascript
webpack下实现动态引入文件方法
Feb 22 Javascript
vue 弹框产生的滚动穿透问题的解决
Sep 21 Javascript
Vue快速实现通用表单验证功能
Dec 05 Javascript
原生js实现点击轮播切换图片
Feb 11 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
PHP+MYSQL的文章管理系统(二)
2006/10/09 PHP
php数组中包含中文的排序方法
2014/06/03 PHP
Win10 下安装配置IIS + MySQL + nginx + php7.1.7
2017/08/04 PHP
MacOS下PHP7.1升级到PHP7.4.15的方法
2021/02/22 PHP
学习ExtJS form布局
2009/10/08 Javascript
浅谈Javascript面向对象编程
2011/11/15 Javascript
JavaScript修改css样式style动态改变元素样式
2013/12/16 Javascript
jQuery使用元素属性attr赋值详解
2015/02/27 Javascript
详解JavaScript中void语句的使用
2015/06/04 Javascript
原生js配合cookie制作保存路径的拖拽
2015/12/29 Javascript
jQuery实现手机自定义弹出输入框
2016/06/13 Javascript
jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码
2016/12/05 Javascript
将angular-ui的分页组件封装成指令的方法详解
2017/05/10 Javascript
Bootstrap实现下拉菜单多级联动
2017/11/23 Javascript
手写简单的jQuery雪花飘落效果实例
2018/04/22 jQuery
jQuery实现数字华容道小游戏(实例代码)
2020/01/16 jQuery
JavaScript实现tab栏切换效果
2020/03/16 Javascript
ptyhon实现sitemap生成示例
2014/03/30 Python
Python多进程分块读取超大文件的方法
2016/04/13 Python
python使用锁访问共享变量实例解析
2018/02/08 Python
Anaconda入门使用总结
2018/04/05 Python
python 简单照相机调用系统摄像头实现方法 pygame
2018/08/03 Python
python程序中的线程操作 concurrent模块使用详解
2019/09/23 Python
python Qt5实现窗体跟踪鼠标移动
2019/12/13 Python
Python使用Pandas库常见操作详解
2020/01/16 Python
使用matlab 判断两个矩阵是否相等的实例
2020/05/11 Python
trivago美国:全球最大的酒店价格比较网站
2018/01/18 全球购物
捷克鲜花配送:Florea.cz
2018/10/29 全球购物
马德里著名的运动鞋商店:NOIRFONCE
2019/04/12 全球购物
大专生简历的自我评价
2013/11/26 职场文书
专营店会计助理岗位职责
2013/11/29 职场文书
大学毕业生文采飞扬的自我鉴定
2013/12/03 职场文书
物流创业计划书
2014/02/01 职场文书
餐厅总厨求职信
2014/03/04 职场文书
行政后勤人员工作计划应该怎么写?
2019/08/16 职场文书
八年级作文之感恩
2019/11/22 职场文书