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实现图片的前进与后退功能
Apr 24 Javascript
JavaScript验证18位身份证号码最后一位正确性的实现代码
Aug 07 Javascript
jQuery中Ajax的load方法详解
Jan 14 Javascript
jQuery实现带有上下控制按钮的简单多行滚屏效果代码
Sep 04 Javascript
JavaScript中各种引用类型的常用操作方法小结
May 05 Javascript
基于JS组件实现拖动滑块验证功能(代码分享)
Nov 18 Javascript
jQuery实现简单弹窗遮罩效果
Feb 27 Javascript
layui中layer前端组件实现图片显示功能的方法分析
Oct 13 Javascript
vue  directive定义全局和局部指令及指令简写
Nov 20 Javascript
Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题
Apr 16 Javascript
操作按钮悬浮固定在微信小程序底部的实现代码
Aug 02 Javascript
Vue 实现创建全局组件,并且使用Vue.use() 载入方式
Aug 11 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源代码加密?PHP二进制加密与解密的解决办法
2013/04/22 PHP
PHP性能分析工具xhprof的安装使用与注意事项
2017/12/19 PHP
几行代码轻松搞定jquery实现flash8类似的连接效果
2007/05/03 Javascript
火狐浏览器(firefox)下获得Event对象以及keyCode
2008/11/13 Javascript
jquery 输入框数字限制插件
2009/11/10 Javascript
javascript简易缓动插件(源码打包)
2012/02/16 Javascript
JS动态添加option和删除option(附实例代码)
2013/04/01 Javascript
javascript中HTMLDOM操作详解
2014/12/11 Javascript
jQuery form 表单验证插件(fieldValue)校验表单
2016/01/24 Javascript
js实现弹窗居中的简单实例
2016/10/09 Javascript
JavaScript遍历Json串浏览器输出的结果不统一问题
2016/11/03 Javascript
从零学习node.js之mysql数据库的操作(五)
2017/02/24 Javascript
jQuery插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
2017/03/23 jQuery
Vue实现搜索 和新闻列表功能简单范例
2018/03/16 Javascript
JavaScript引用类型Array实例分析
2018/07/24 Javascript
js new Date()实例测试
2019/10/31 Javascript
nodejs nedb 封装库与使用方法示例
2020/02/06 NodeJs
Vue实现简单计算器案例
2020/02/25 Javascript
解决echarts echarts数据动态更新和dataZoom被重置问题
2020/07/20 Javascript
[03:05]《我与DAC》之xiao8:DAC与BG
2018/03/27 DOTA
[36:54]Mineski vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python算法学习之基数排序实例
2013/12/18 Python
linux系统使用python监测网络接口获取网络的输入输出
2014/01/15 Python
Python随手笔记之标准类型内建函数
2015/12/02 Python
python中模块查找的原理与方法详解
2017/08/11 Python
Python使用matplotlib绘制余弦的散点图示例
2018/03/14 Python
python实现两张图片拼接为一张图片并保存
2019/07/16 Python
Python中的list与tuple集合区别解析
2019/10/12 Python
HTML5制作表格样式
2016/11/15 HTML / CSS
Myprotein蛋白粉美国官网:欧洲畅销运动营养品牌
2016/11/15 全球购物
StubHub智利:购买和出售您的门票
2016/11/23 全球购物
西部世纪.net笔试题面试题
2014/04/03 面试题
2013年办公室秘书的个人自我鉴定
2013/10/24 职场文书
酒店保安员岗位职责
2014/01/31 职场文书
普通党员群众路线教育实践活动心得体会
2014/11/04 职场文书
2019财务毕业实习报告
2019/06/27 职场文书