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 相关文章推荐
JQuery 常用操作代码
Mar 14 Javascript
jqGrid随窗口大小变化自适应大小的示例代码
Dec 28 Javascript
Jquery结合HTML5实现文件上传
Jun 25 Javascript
AngularJS 面试题集锦
Sep 06 Javascript
基于Angular.js实现的触摸滑动动画实例代码
Feb 19 Javascript
vue cli使用绝对路径引用图片问题的解决
Dec 06 Javascript
web前端vue之vuex单独一文件使用方式实例详解
Jan 11 Javascript
vue+vuex+axios实现登录、注册页权限拦截
Mar 09 Javascript
Vue CLI 2.x搭建vue(目录最全分析)
Feb 27 Javascript
JS实现给数组对象排序的方法分析
Jun 24 Javascript
OpenLayers3实现地图鹰眼以及地图比例尺的添加
Sep 25 Javascript
简单聊聊Vue中的计算属性和属性侦听
Oct 05 Vue.js
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常用函数 推荐收藏保存
2010/02/21 PHP
PHP获取url的函数代码
2011/08/02 PHP
php缩放gif和png图透明背景变成黑色的解决方法
2014/10/14 PHP
Laravel 5.5 的自定义验证对象/类示例代码详解
2017/08/29 PHP
PHP+MySQL使用mysql_num_rows实现模糊查询图书信息功能
2018/05/31 PHP
php如何比较两个浮点数是否相等详解
2019/02/12 PHP
利用谷歌地图API获取点与点的距离的js代码
2012/10/11 Javascript
关于全局变量和局部变量的那些事
2013/01/11 Javascript
jQuery Ajax异步处理Json数据详解
2013/11/05 Javascript
JavaScript计算两个日期时间段内日期的方法
2015/03/16 Javascript
JavaScript中对象的不同创建方法
2016/08/12 Javascript
javascript实现数据双向绑定的三种方式小结
2017/03/09 Javascript
JavaScript数据结构之双向链表定义与使用方法示例
2017/10/27 Javascript
js canvas实现红包照片效果
2018/08/21 Javascript
vue-router权限控制(简单方式)
2018/10/29 Javascript
jQuery实现的五星点评功能【案例】
2019/02/18 jQuery
js比较两个单独的数组或对象是否相等的实例代码
2019/04/28 Javascript
小程序富文本提取图片可放大缩小
2020/05/26 Javascript
[07:47]DOTA2国际邀请赛采访专栏:探访Valve总部
2013/08/08 DOTA
python批量赋值操作实例
2018/10/22 Python
详解10个可以快速用Python进行数据分析的小技巧
2019/06/24 Python
python 调试冷知识(小结)
2019/11/11 Python
pandas使用之宽表变窄表的实现
2020/04/12 Python
网页中的电话号码如何实现一键直呼效果_附示例
2016/03/15 HTML / CSS
天猫精选:上天猫,就够了
2016/09/21 全球购物
LivingSocial爱尔兰:爱尔兰本地优惠
2018/08/10 全球购物
乌克兰电子和家用电器商店:Foxtrot
2019/07/23 全球购物
什么是Deployment descriptors;都有什么类型的部署描述符
2015/07/28 面试题
四川internet信息高速公路(C#)笔试题
2012/02/29 面试题
高二历史教学反思
2014/01/25 职场文书
总经理岗位职责描述
2014/02/08 职场文书
《猴子种树》教学反思
2014/02/14 职场文书
2015年学校教研室主任工作总结
2015/07/20 职场文书
《酸的和甜的》教学反思
2016/02/18 职场文书
Ajax请求超时与网络异常处理图文详解
2021/05/23 Javascript
简单聊聊TypeScript只读修饰符
2022/04/06 Javascript