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 取值、赋值的基本方法整理
Mar 31 Javascript
Java框架SSH结合Easyui控件实现省市县三级联动示例解析
Jun 12 Javascript
JavaScript 限制文本框不可输入英文单双引号的方法
Dec 20 Javascript
Three.js基础部分学习
Jan 08 Javascript
微信小程序教程系列之视图层的条件渲染(10)
Apr 19 Javascript
vue加载自定义的js文件方法
Mar 13 Javascript
vue组件实现进度条效果
Jun 06 Javascript
vue slots 组件的组合/分发实例
Sep 06 Javascript
在vue中封装的弹窗组件使用队列模式实现方法
Jul 23 Javascript
解决vue安装less报错Failed to compile with 1 errors的问题
Oct 22 Javascript
记录一次websocket封装的过程
Nov 23 Javascript
js不常见操作运算符总结
Nov 20 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令牌 Token改进版
2008/07/18 PHP
JS 按钮点击触发(兼容IE、火狐)
2013/08/07 Javascript
jquery $.each 和for怎么跳出循环终止本次循环
2013/09/27 Javascript
js定时器的使用(实例讲解)
2014/01/06 Javascript
javaScript 页面自动加载事件详解
2014/02/10 Javascript
jquery实现的V字形显示效果代码
2015/10/27 Javascript
jQuery Timelinr实现垂直水平时间轴插件(附源码下载)
2016/02/16 Javascript
jQuery源码分析之sizzle选择器详解
2017/02/13 Javascript
使用requirejs模块化开发多页面一个入口js的使用方式
2017/06/14 Javascript
浅谈JS中的反柯里化( uncurrying)
2017/08/17 Javascript
Vue2.0 实现单选互斥的方法
2018/04/13 Javascript
vue2实现搜索结果中的搜索关键字高亮的代码
2018/08/29 Javascript
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
2019/04/29 Javascript
jquery弹窗时禁止body滚动条滚动的例子
2019/09/21 jQuery
Node.JS获取GET,POST数据之queryString模块使用方法详解
2020/02/06 Javascript
js实现翻牌小游戏
2020/07/31 Javascript
Vue组件生命周期运行原理解析
2020/11/25 Vue.js
Python BeautifulSoup中文乱码问题的2种解决方法
2014/04/22 Python
Python编程对列表中字典元素进行排序的方法详解
2017/05/26 Python
Python 利用scrapy爬虫通过短短50行代码下载整站短视频
2018/10/29 Python
500行代码使用python写个微信小游戏飞机大战游戏
2019/10/16 Python
Python Sphinx使用实例及问题解决
2020/01/17 Python
win10下python3.8的PIL库安装过程
2020/06/08 Python
python解包用法详解
2021/02/17 Python
HTML5 Video/Audio播放本地文件示例介绍
2013/11/18 HTML / CSS
canvas与html5实现视频截图功能示例
2016/12/15 HTML / CSS
捷克体育用品购物网站:D-sport
2017/12/28 全球购物
英国网上购买肉类网站:Great British Meat
2018/10/17 全球购物
德国的大型美妆个护电商:Flaconi
2020/06/26 全球购物
Linux内核的同步机制是什么?主要有哪几种内核锁
2013/01/03 面试题
什么是JNDI的上下文?如何初始化JNDI上下文
2012/03/10 面试题
学校运动会广播稿100条
2014/09/14 职场文书
2015年教师教学工作总结
2015/04/28 职场文书
浅谈pytorch中的dropout的概率p
2021/05/27 Python
MySQL实现配置主从复制项目实践
2022/03/31 MySQL
动视暴雪取消疫苗禁令 让所有员工返回线下工作
2022/04/03 其他游戏