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 相关文章推荐
兼容FireFox 的 js 日历 支持时间的获取
Mar 04 Javascript
js 绑定带参数的事件以及手动触发事件
Apr 27 Javascript
js操作select控件的几种方法
Jun 02 Javascript
jquery单行文字向上滚动效果的实现代码
Sep 05 Javascript
Javascript非构造函数的继承
Apr 27 Javascript
理解JavaScript原型链
Oct 25 Javascript
vue绑定class与行间样式style详解
Aug 16 Javascript
node前端模板引擎Jade之标签的基本写法
May 11 Javascript
vue 设置路由的登录权限的方法
Jul 03 Javascript
React如何解决fetch跨域请求时session失效问题
Nov 02 Javascript
js实现上传图片到服务器
Apr 11 Javascript
教你一步步实现一个简易promise
Nov 02 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与Mysql的一些简单的操作
2015/02/26 PHP
在WordPress的文章编辑器中设置默认内容的方法
2015/12/29 PHP
Aster vs KG BO3 第二场2.18
2021/03/10 DOTA
JavaScript基础篇之变量作用域、传值、传址的简单介绍与实例
2013/06/29 Javascript
Angular Js文件上传之form-data
2015/08/28 Javascript
BootStrap 实现各种样式的进度条效果
2016/12/07 Javascript
整理关于Bootstrap导航的慕课笔记
2017/03/29 Javascript
微信小程序实现锚点定位楼层跳跃的实例
2017/05/18 Javascript
JavaScript用200行代码制作打飞机小游戏实例
2017/06/21 Javascript
ES6中javascript实现函数绑定及类的事件绑定功能详解
2017/11/08 Javascript
vue.js中$set与数组更新方法
2018/03/08 Javascript
r.js来合并压缩css文件的示例
2018/04/26 Javascript
微信小程序8种数据通信的方式小结
2020/02/03 Javascript
linux服务器快速卸载安装node环境(简单上手)
2021/02/22 Javascript
python监控网卡流量并使用graphite绘图的示例
2014/04/27 Python
pymongo实现多结果进行多列排序的方法
2015/05/16 Python
Python 稀疏矩阵-sparse 存储和转换
2017/05/27 Python
python使用锁访问共享变量实例解析
2018/02/08 Python
python将每个单词按空格分开并保存到文件中
2018/03/19 Python
Python统计单词出现的次数
2018/04/04 Python
PyQt5 实现字体大小自适应分辨率的方法
2019/06/18 Python
利用pyecharts实现地图可视化的例子
2019/08/12 Python
python3使用print打印带颜色的字符串代码实例
2019/08/22 Python
Python如何实现小程序 无限求和平均
2020/02/18 Python
详解Python中的Lock和Rlock
2021/01/26 Python
Django项目在pycharm新建的步骤方法
2021/03/02 Python
CSS3 简单又实用的5个属性
2010/03/04 HTML / CSS
稀有和绝版书籍:Biblio.com
2017/02/02 全球购物
加州风格的游泳和沙滩装品牌:Cupshe
2019/06/10 全球购物
房产继承公证书
2014/04/09 职场文书
酒店管理专业毕业生自我鉴定
2014/09/29 职场文书
办公室班子四风问题对照检查材料
2014/10/04 职场文书
单位作风建设自查报告
2014/10/23 职场文书
大学军训决心书
2015/02/05 职场文书
交通安全教育心得体会
2016/01/15 职场文书
MySQL 数据类型详情
2021/11/11 MySQL