按钮的Ajax请求时一次点击两次提交的解决方法

更新时间：2016年09月25日 11:14:06 作者：吴东雷

像ajax请求发生两次提交的原因是在执行完ajax请求后，并没有阻止submit的行为，下面小编给大家带来两种按钮的ajax请求时一次点击两次提交的解决方法，一起看看吧

页面中的按钮的type是submit的： <input type="submit" value="Create" id="submit" />

ajax的请求，在JQuery中是：

$(function () {
$('#submit').click(function () {
var createGenreForm = $('#createGenreForm');
if (createGenreForm.valid()) {
var obj = {
Name: $('#Name').val(),
Description: $('#Description').val()
};
var jsonSerialized = JSON.stringify(obj);
$.ajax({
type: "POST",
url: createGenreForm.attr('action'),
dataType: "json",
contentType: "application/json; charset=utf-8",
data: jsonSerialized,
success: function (result) {
alert(result.Message);
},
error: function (error) {
alert("There was an error posting the data to the server: " + error.responseText);
}
});
}
});
});

发生两次提交的原因是在执行完ajax请求后，并没有阻止submit的行为，所以解决方法有两种：

1、不使用type为submit类型的按钮，而是使用type是button的按钮。

2、在$('#submit').click函数中，最后加一行return false;，即可阻止submit。

一点说明：为什么在标题中要嵌入英文？原因是为了能够让国外的网友能查询到这篇文章。平常在Google上查资料的时候，经常参考国外网友的博客，帮助我解决了很多问题，所以我也想让他们能够参考我写的内容。当然文中我不可能全部译为英文，所以我尽量把代码粘全，靠代码说话吧。

以上所述是小编给大家介绍的按钮的Ajax请求时一次点击两次提交的解决方法,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

用ajax xml的数据读取的HelloWorld程序
我们经常会使用JavaScript实现动态的改变div里面的内容，尤其是使用ajax的时候，尤为重要。
2009-04-04
ajax获取用户所在地天气的方法
这篇文章主要为大家详细介绍了ajax获取用户所在地天气的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-10-10
AJAX 动态获取当前时间(php)
利用AJAX动态获取当前时间，客户端time.php,服务器端time_check.php
2009-11-11
快速解决ajax返回值给外部函数的问题
今天小编就为大家分享一篇快速解决ajax返回值给外部函数的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-08-08
jsp+ajax实现无刷新上传文件的方法
这篇文章主要介绍了jsp+ajax实现无刷新上传文件的方法,结合实例形式分析了ajax无刷新上传文件及jsp后台处理的相关技巧,需要的朋友可以参考下
2016-01-01
Ajax 跨域如何实现
这篇文章主要介绍了Ajax 跨域如何实现的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下
2016-05-05
Ajax 请求队列解决方案并结合elementUi做全局加载状态
这篇文章主要介绍了Ajax 请求队列解决方案并结合elementUi做全局加载状态,使用消息队列制作请求防抖，防止重复请求印象服务器，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-10-10
Jquery Ajax请求方法小结(值得收藏)
本文给大家介绍jquery ajax请求方法小结，jquery作为一个轻量级的js框架，能快速的开发js应用，并且在一定程度上改变了我们写js代码的习惯，对jquery ajax请求感兴趣的朋友参考下
2015-11-11
AJAX跨域请求获取JSON数据的实现方法
我们都知道，由于受到浏览器的限制，AJAX 是不允许跨域请求，不过可以通过使用 JSONP 来实现，本文介绍了 JSONP 的是怎么在 jQuery，MooTools 的，Dojo Toolkit 中实现的，感兴趣的朋友跟随小编一起看看吧
2023-06-06
ajax实现select三级联动效果
这篇文章主要为大家详细介绍了ajax动态实现select三级联动，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-01-01