jQuery基于ajax()使用serialize()提交form数据的方法_jquery

本文实例讲述了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程序设计有所帮助。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索jquery
, serialize()
, ajax()
提交form数据
jquery ajax 提交form、ajax form serialize、jquery formserialize、jquery.serialize提交、ajax提交form表单,以便于您获取更多的相关知识。

时间: 2016-12-08

jQuery基于ajax()使用serialize()提交form数据的方法_jquery的相关文章

jQuery基于$.ajax设置移动端click超时处理方法_jquery

本文实例讲述了jQuery基于$.ajax设置移动端click超时处理方法.分享给大家供大家参考,具体如下: 这里介绍jquery click事件如何在移动端自动转换成touchstart事件. 因为移动端click事件会比touchstart事件慢几拍 移动设备某个元素上事件执行顺序是: touchstart touchmove touchend click{mousedown->mousemove->mouseup} click事件在移动设备上虽然会识别但却是最后一个执行的,所以如果不把c

jQuery的 $.ajax防止重复提交的两种方法(推荐)_jquery

下面给大家带来两种关于jquery 的ajax防止重复提交的解决方法,具体介绍如下所示: 1.第一种,对于onclick事件触发的的ajax 可以采用如下方法: 即在beforeSend中使点击按钮不可用,ajax结果返回后置为可用 $.ajax( { type: 'POST', url: APP+'?m=Shopping&a=ajaxSubmitorder&sid='+sid+'&src='+src, cache:false, dataType: 'json', data: {'

jQuery基于排序功能实现上移、下移的方法_jquery

本文实例讲述了jQuery基于排序功能实现上移.下移的方法.分享给大家供大家参考,具体如下: 效果 思路, 跟相邻元素,互换sort. 前提是每一个元素都有自己的sort值,不为零. <tr id="{sh:$vo.id}"> <td> <span onclick="up(this);" class="glyphicon glyphicon-arrow-up text-danger up" style="c

jQuery基于ID调用指定iframe页面内的方法_jquery

本文实例讲述了jQuery基于ID调用指定iframe页面内的方法.分享给大家供大家参考,具体如下: 复制代码 代码如下: $(window.parent.document).contents().find("#iframeID")[0].contentWindow.initPagerList(); 说明: iframeID 为iframe的ID: initPagerList 为 iframe 页面内的方法. <html> <head> <title>

jQuery基于图层模仿五星星评价功能的方法_jquery

本文实例讲述了jQuery基于图层模仿五星星评价功能的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"&

Jquery通过Ajax方式来提交Form表单的具体实现_jquery

今天刚好看到Jquery的ajax提交数据到服务器的方法,原文是: 保存数据到服务器,成功时显示信息. jQuery 代码: 复制代码 代码如下: $.ajax({ type: "POST", url: "some.php", data: "name=John&location=Boston", success: function(msg){ alert( "Data Saved: " + msg ); } }); 后

JQUERY的AJAX请求缓存里的数据问题处理_jquery

参数type由get改成post 添加参数cache并设置成false 添加时间戳 $.ajax({ url: 'ios/index', cache: false, type: 'post', data: { timestamp: new Date().getTime() //params here }, dataType: 'json' }).done(function (data) { //codes here }); 是不是非常的简单呢,希望小伙伴们能够喜欢. 以上是小编为您精心准备的的内

jquery ajax的serialize提交保存数据简单例子

html代码代码  代码如下 复制代码 <table width="100%" border="0" cellspacing="1" cellpadding="1" style="margin-top:20px;">  <form id="submitform" name="submitform" >   <tr>     <

jQuery UI的Dialog无法提交问题的解决方法_jquery

具体表现为: 1.提交按钮失效,点击后无任何反应. 2.即便是使用其它手段使页面产生提交,服务器端也无法取到Dialog中的表单数据. 原因:JQuery会把Dialog的元素append到Body里面,而不是form里面.研究了页面源码后发现,jQuery UI Dialog控件初始化时动态生成的HTML元素被添加到页面的尾部.form元素的后面,而原始的Dialog模板部分(其内包含表单元素)也被移到了 动态生成的HTML元素内.也就是说,原先在form内的表单在Dialog初始化后就被移到