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 相关文章推荐
Extjs学习笔记之八 继承和事件基础
Jan 08 Javascript
ASP.NET MVC中EasyUI的datagrid跨域调用实现代码
Mar 14 Javascript
JavaScript中为什么null==0为false而null大于=0为true(个人研究)
Sep 16 Javascript
深入理解javascript动态插入技术
Nov 12 Javascript
jQuery实现动画效果的简单实例
Jan 27 Javascript
jquery Ajax 实现加载数据前动画效果的示例代码
Feb 07 Javascript
JavaScript中判断数据类型的方法总结
May 24 Javascript
Bootstrap table 定制提示语的加载过程
Feb 20 Javascript
javascript 开发之网页兼容各种浏览器
Sep 28 Javascript
详解Vue demo实现商品列表的展示
May 07 Javascript
Vue.use()在new Vue() 之前使用的原因浅析
Aug 26 Javascript
如何通过vscode运行调试javascript代码
Jul 24 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与SQL注入攻击[二]
2007/04/17 PHP
PHP中根据IP地址判断城市实现城市切换或跳转代码
2012/09/04 PHP
浅析PHP安装扩展mcrypt以及相关依赖项(PHP安装PECL扩展的方法)
2013/07/05 PHP
PHP图片等比缩放类SimpleImage使用方法和使用实例分享
2014/04/10 PHP
PHP实现基于文本的摩斯电码生成器
2016/01/11 PHP
什么是JavaScript
2009/08/13 Javascript
jquery getScript动态加载JS方法改进详解
2012/11/15 Javascript
深入理解javascript的执行顺序
2014/04/04 Javascript
jquery使用经验小结
2015/05/20 Javascript
javascript实现类似百度分享功能的方法
2015/07/27 Javascript
JavaScript数组对象实现增加一个返回随机元素的方法
2015/07/27 Javascript
JavaScript实现简单的日历效果
2016/09/25 Javascript
axios学习教程全攻略
2017/03/26 Javascript
Angular.Js之Scope作用域的学习教程
2017/04/27 Javascript
详解在vue-cli项目中安装node-sass
2017/06/21 Javascript
js 获取json数组里面数组的长度实例
2017/10/31 Javascript
JS实现遍历不规则多维数组的方法
2018/03/21 Javascript
vue监听对象及对象属性问题
2018/08/20 Javascript
点击按钮弹出模态框的一系列操作代码实例
2019/03/29 Javascript
微信小程序如何实现radio单选框单击打勾和取消
2020/01/21 Javascript
nuxt静态部署打包相对路径操作
2020/11/06 Javascript
Python实现的Kmeans++算法实例
2014/04/26 Python
Python的Django框架中自定义模版标签的示例
2015/07/20 Python
python使用pymysql实现操作mysql
2016/09/13 Python
python 获取当天凌晨零点的时间戳方法
2018/05/22 Python
Python从使用线程到使用async/await的深入讲解
2018/09/16 Python
python实现弹跳小球
2019/05/13 Python
Python监控服务器实用工具psutil使用解析
2019/12/19 Python
python 读写文件包含多种编码格式的解决方式
2019/12/20 Python
在Windows上安装和配置 Jupyter Lab 作为桌面级应用程序教程
2020/04/22 Python
瑰珀翠美国官网:Crabtree & Evelyn美国
2016/11/29 全球购物
红歌会主持词
2015/07/02 职场文书
《普罗米修斯》教学反思
2016/02/22 职场文书
2019暑假阅读倡议书
2019/06/24 职场文书
JavaScript使用canvas绘制坐标和线
2021/04/28 Javascript
JavaWeb Servlet开发注册页面实例
2022/04/11 Java/Android