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 相关文章推荐
VBS通过WMI监视注册表变动的代码
Oct 27 Javascript
动态加载script文件的两种方法
Aug 15 Javascript
vue.js学习笔记:如何加载本地json文件
Jan 17 Javascript
vue实现添加标签demo示例代码
Jan 21 Javascript
JavaScript中splice与slice的区别
May 09 Javascript
vue中阻止click事件冒泡,防止触发另一个事件的方法
Feb 08 Javascript
JavaScript数组去重的方法总结【12种方法,号称史上最全】
Feb 28 Javascript
layer.msg()去掉默认时间,实现手动关闭的方法
Sep 12 Javascript
深入了解JavaScript 防抖和节流
Sep 12 Javascript
JS代码屏蔽F12,右键,粘贴,复制,剪切,选中,操作实例
Sep 17 Javascript
js实现动态时钟
Mar 12 Javascript
解决vue单页面应用进入页面加载所有 js 的问题
Aug 12 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
海河写的 Discuz论坛帖子调用js的php代码
2007/08/23 PHP
PHP基础知识介绍
2013/09/17 PHP
安装ImageMagick出现error while loading shared libraries的解决方法
2014/09/23 PHP
Yii2 如何在modules中添加验证码的方法
2017/06/19 PHP
YUI 读码日记之 YAHOO.util.Dom - Part.1
2008/03/22 Javascript
用jquery ajax获取网站Alexa排名的代码
2009/12/12 Javascript
关于Javascript模块化和命名空间管理的问题说明
2010/12/06 Javascript
Java/JS获取flash高宽的具体方法
2013/12/27 Javascript
jQuery的bind()方法使用详解
2015/07/15 Javascript
JavaScript各类型的关系图解
2015/10/16 Javascript
学习掌握JavaScript中this的使用技巧
2016/08/29 Javascript
Vue.js每天必学之指令系统与自定义指令
2016/09/07 Javascript
vue与bootstrap实现时间选择器的示例代码
2017/08/26 Javascript
解决webpack无法通过IP地址访问localhost的问题
2018/02/22 Javascript
vue-rx的初步使用教程
2018/09/21 Javascript
JavaScript 扩展运算符用法实例小结【基于ES6】
2019/06/17 Javascript
Python中的集合类型知识讲解
2015/08/19 Python
python监控文件或目录变化
2016/06/07 Python
Python实现两款计算器功能示例
2017/12/19 Python
使用django-crontab实现定时任务的示例
2018/02/26 Python
django session完成状态保持的方法
2018/11/27 Python
python_opencv用线段画封闭矩形的实例
2018/12/05 Python
微信公众号token验证失败解决方案
2019/07/22 Python
css3实现垂直下拉动画菜单示例
2014/04/22 HTML / CSS
HTML5实现文件断点续传的方法
2017/01/04 HTML / CSS
布鲁明戴尔百货店:Bloomingdale’s
2016/12/21 全球购物
汉森批发:Hansen Wholesale
2018/05/24 全球购物
struct与class的区别
2014/02/03 面试题
行政经理岗位职责
2013/11/09 职场文书
竞聘副主任科员演讲稿
2014/01/11 职场文书
村委会主任先进事迹
2014/01/15 职场文书
金融行业职业生涯规划范文
2014/01/17 职场文书
机电专业毕业生求职信
2014/07/01 职场文书
奉献家乡演讲稿
2014/09/16 职场文书
经费申请报告范文
2015/05/18 职场文书
入伍志愿书怎么写?
2019/07/19 职场文书