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 相关文章推荐
Js动态创建div
Sep 25 Javascript
jquery 查找新建元素代码
Jul 06 Javascript
为什么要在引入的css或者js文件后面加参数的详细讲解
May 03 Javascript
深入分析JSONP跨域的原理
Dec 10 Javascript
JavaScript基础知识之方法汇总结
Jan 24 Javascript
JS实现响应鼠标点击动画渐变弹出层效果代码
Mar 25 Javascript
老生常谈 关于JavaScript的类的继承
Jun 24 Javascript
Vue.js中组件中的slot实例详解
Jul 17 Javascript
React Native预设占位placeholder的使用
Sep 28 Javascript
AngularJS实现图片上传和预览功能的方法分析
Nov 08 Javascript
优化Vue项目编译文件大小的方法步骤
May 27 Javascript
Electron实现应用打包、自动升级过程解析
Jul 07 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程序员应该了解MongoDB的五件事
2013/06/03 PHP
php数据类型判断函数有哪些
2013/09/23 PHP
2014最热门的24个php类库汇总
2014/12/18 PHP
PHP Static延迟静态绑定用法分析
2016/03/16 PHP
PHP中ID设置自增后不连续的原因分析及解决办法
2016/08/21 PHP
php面向对象的用户登录身份验证
2017/06/08 PHP
HR vs CL BO3 第二场 2.13
2021/03/10 DOTA
让AJAX不依赖后端接口实现方案
2012/12/03 Javascript
关于Javascript 对象(object)的prototype
2014/05/09 Javascript
AngularJS语法详解(续)
2015/01/23 Javascript
JavaScript数组去重的3种方法和代码实例
2015/07/01 Javascript
JavaScript引用类型和基本类型详解
2016/01/06 Javascript
jquery  实现轮播图详解及实例代码
2016/10/12 Javascript
JS触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器
2016/10/30 Javascript
Bootstrop实现多级下拉菜单功能
2016/11/24 Javascript
jQuery 开发之EasyUI 添加数据的实例
2017/09/26 jQuery
react-navigation 如何判断用户是否登录跳转到登录页的方法
2017/12/01 Javascript
微信小程序实现漂亮的弹窗效果
2020/05/26 Javascript
对VUE中的对象添加属性
2018/09/18 Javascript
vue实现百度下拉列表交互操作示例
2019/03/12 Javascript
基于webpack4+vue-cli3项目实现换肤功能
2019/07/17 Javascript
vue弹出框组件封装实例代码
2019/10/31 Javascript
[48:21]林俊杰圣堂刺客超神杀戮秀
2014/10/29 DOTA
python3使用tkinter实现ui界面简单实例
2014/01/10 Python
python自动化测试之setUp与tearDown实例
2014/09/28 Python
深入讲解Python函数中参数的使用及默认参数的陷阱
2016/03/13 Python
对numpy中布尔型数组的处理方法详解
2018/04/17 Python
Python requests发送post请求的一些疑点
2018/05/20 Python
Python使用win32com模块实现数据库表结构自动生成word表格的方法
2018/07/17 Python
HTML5 CSS3打造相册效果附源码下载
2014/06/16 HTML / CSS
高中生自我鉴定范文
2013/10/30 职场文书
满月酒主持词
2014/03/27 职场文书
厂区绿化方案
2014/05/08 职场文书
公司财务人员岗位职责
2015/04/14 职场文书
js中Map和Set的用法及区别实例详解
2022/02/15 Javascript
WINDOWS下安装mysql 8.x 的方法图文教程
2022/04/19 MySQL