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移除数组元素减少长度的方法
Sep 05 Javascript
node.js Web应用框架Express入门指南
May 28 Javascript
JavaScript数组方法大全(推荐)
Jul 05 Javascript
微信支付 JS API支付接口详解
Jul 11 Javascript
JS实现将数字金额转换为大写人民币汉字的方法
Aug 02 Javascript
JavaScript中的冒泡排序法
Aug 03 Javascript
AngularJS中下拉框的高级用法示例
Oct 11 Javascript
捕获未处理的Promise错误方法
Oct 13 Javascript
vue中tab选项卡的实现思路
Nov 25 Javascript
小程序实现搜索框功能
Mar 26 Javascript
element-ui 文件上传修改文件名的方法示例
Nov 05 Javascript
使用webpack搭建vue环境的教程详解
Dec 31 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判断对象是派生自哪个类的方法
2015/06/20 PHP
用js重建星际争霸
2006/12/22 Javascript
js与jquery获取父元素,删除子元素的两种不同方法
2014/01/09 Javascript
深入浅析JavaScript面向对象和原型函数
2016/02/06 Javascript
js实现统计字符串中特定字符出现个数的方法
2016/08/02 Javascript
详解Javascript中的原型OOP
2016/10/12 Javascript
vue2 前端搜索实现示例
2018/02/26 Javascript
jQuery中的$是什么意思及 $. 和 $().的区别
2018/04/20 jQuery
详解如何在你的Vue项目配置vux
2018/06/04 Javascript
关于TypeScript模块导入的那些事
2018/06/12 Javascript
JavaScript查看代码运行效率console.time()与console.timeEnd()用法
2019/01/18 Javascript
Vuepress 搭建带评论功能的静态博客的实现
2019/02/17 Javascript
vue移动端实现手机左右滑动入场动画
2020/06/17 Javascript
Vue实现页面添加水印功能
2019/11/09 Javascript
基于vue实现简易打地鼠游戏
2020/08/21 Javascript
Vuejs通过拖动改变元素宽度实现自适应
2020/09/02 Javascript
解决ant Design中this.props.form.validateFields未执行的问题
2020/10/27 Javascript
[01:38]完美世界高校联赛决赛花絮
2018/12/02 DOTA
python3.3教程之模拟百度登陆代码分享
2014/01/16 Python
在Python中利用Into包整洁地进行数据迁移的教程
2015/03/30 Python
Python利用ansible分发处理任务
2015/08/04 Python
利用Python3分析sitemap.xml并抓取导出全站链接详解
2017/07/04 Python
Python使用try except处理程序异常的三种常用方法分析
2018/09/05 Python
Python根据当前日期取去年同星期日期
2019/04/14 Python
简单了解为什么python函数后有多个括号
2019/12/19 Python
推荐8款常用的Python GUI图形界面开发框架
2020/02/23 Python
Python3使用 GitLab API 进行批量合并分支
2020/10/15 Python
Python ellipsis 的用法详解
2020/11/20 Python
css3实现椭圆轨迹旋转的示例代码
2018/10/29 HTML / CSS
英国打印机墨盒销售网站:Ink Factory
2019/10/07 全球购物
超市总经理岗位职责
2014/02/02 职场文书
在校大学生个人的自我评价
2014/02/13 职场文书
质检部经理岗位职责
2014/02/19 职场文书
2015年师德师风自我评价范文
2015/03/05 职场文书
涨价通知
2015/04/23 职场文书
python数字图像处理数据类型及颜色空间转换
2022/06/28 Python