jQuery基于ajax()使用serialize()提交form数据的方法


Posted in Javascript onDecember 08, 2015

本文实例讲述了jQuery基于ajax()使用serialize()提交form数据的方法。分享给大家供大家参考,具体如下:

jQuery的serialize()方法通过序列化表单值,创建URL编码文本字符串,我们就可以选择一个或多个表单元素,也可以直接选择form将其序列化,如:

<form action="">
First name: <input type="text" name="FirstName" value="Bill" /><br />
Last name: <input type="text" name="LastName" value="Gates" /><br />
</form>
<script>
$(document).ready(function(){
 console.log($("form").serialize());
 // FirstName=Bill&LastName=Gates
});
</script>

这样,我们就可以把序列化的值传给ajax()作为url的参数,轻松使用ajax()提交form表单了,而不需要一个一个获取表单中的值然后传给ajax(),举例如下:

$.ajax({
 type: 'post',
 url: 'your url',
 data: $("form").serialize(),
 success: function(data) {
  // your code
 }
});

使用$.post()、$.get()和$.getJSON()也是一样的:

$.post('your url', $("form").serialize(), function(data) {
  // your code
 }
});
$.get('your url', $("form").serialize(), function(data) {
  // your code
 }
});
$.getJSON('your url', $("form").serialize(), function(data) {
  // your code
 }
});

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
javascript CSS画图之基础篇
Jul 29 Javascript
JavaScript模拟重力状态下抛物运动的方法
Mar 03 Javascript
使用jspdf生成pdf报表
Jul 03 Javascript
js实现简单计算器
Nov 22 Javascript
JQuery日期插件datepicker的使用方法
Mar 03 Javascript
浅谈JavaScript 标准对象
Jun 02 Javascript
深入理解javascript的getTime()方法
Feb 16 Javascript
Vue.js用法详解
Nov 13 Javascript
关于JavaScript语句后面的分号问题
Dec 07 Javascript
React BootStrap用户体验框架快速上手
Mar 06 Javascript
js实现黑白div块画空心的图形
Dec 13 Javascript
javascript 代码是如何被压缩的示例代码
May 06 Javascript
jQuery的Ajax用户认证和注册技术实例教程(附demo源码)
Dec 08 #Javascript
jquery+ajax实现注册实时验证实例详解
Dec 08 #Javascript
jQuery使用$.ajax进行即时验证的方法
Dec 08 #Javascript
基于JavaScript创建动态Dom
Dec 08 #Javascript
jQuery实现form表单基于ajax无刷新提交方法详解
Dec 08 #Javascript
JS判断当前页面是否在微信浏览器打开的方法
Dec 08 #Javascript
js实现兼容IE、Firefox的图片缩放代码
Dec 08 #Javascript
You might like
php读取目录所有文件信息dir示例
2014/03/18 PHP
PHP中文竖排转换实现方法
2015/10/23 PHP
php curl中gzip的压缩性能测试实例分析
2016/11/08 PHP
PHP实现的迪科斯彻(Dijkstra)最短路径算法实例
2017/09/16 PHP
input 高级限制级用法
2009/03/26 Javascript
jQuery 事件的命名空间简单了解
2013/11/22 Javascript
ExtJS如何设置与获取radio控件的选取状态
2014/01/22 Javascript
javascript trim函数在IE下不能用的解决方法
2014/09/12 Javascript
jQuery右下角旋转环状菜单特效代码
2015/08/10 Javascript
最全面的百度地图JavaScript离线版开发
2016/09/10 Javascript
Bootstrap源码解读导航(6)
2016/12/23 Javascript
vuejs指令详解
2017/02/07 Javascript
详解JavaScript 中getElementsByName在IE中的注意事项
2017/02/21 Javascript
在angular 6中使用 less 的实例代码
2018/05/13 Javascript
使用vue for时为什么要key【推荐】
2019/07/11 Javascript
Vue登录主页动态背景短视频制作
2019/09/21 Javascript
JQuery复选框全选效果如何实现
2020/05/08 jQuery
vue项目,代码提交至码云,iconfont的用法说明
2020/07/30 Javascript
python中将阿拉伯数字转换成中文的实现代码
2011/05/19 Python
python生成器的使用方法
2013/11/21 Python
Python爬虫DNS解析缓存方法实例分析
2017/06/02 Python
Python中optparser库用法实例详解
2018/01/26 Python
Tensorflow实现AlexNet卷积神经网络及运算时间评测
2018/05/24 Python
python一行sql太长折成多行并且有多个参数的方法
2018/07/19 Python
python 从文件夹抽取图片另存的方法
2018/12/04 Python
Python中的整除和取模实例
2020/06/03 Python
python3中数组逆序输出方法
2020/12/01 Python
pycharm配置python 设置pip安装源为豆瓣源
2021/02/05 Python
SHEIN台湾:购买最新流行女装服饰
2019/05/18 全球购物
简历中自我评价范文3则
2013/12/14 职场文书
五分钟演讲稿
2014/04/30 职场文书
中央空调节能方案
2014/06/15 职场文书
小学家长通知书评语
2014/12/31 职场文书
2015庆祝七一建党节94周年活动总结
2015/03/20 职场文书
简单了解 MySQL 中相关的锁
2021/05/25 MySQL
Java异常处理try catch的基本用法
2021/12/06 Java/Android