我遇到多个AJAX请求的问题。例如，当用户点击它时会有一个按钮，发出一个AJAX请求，并将一条记录输入到数据库中。但是，如果用户非常快地多次点击该按钮，则会同时发出多个AJAX请求，这会导致同一记录两次输入数据库。我尝试了async: false或使按钮处于非活动状态仍在发生。
的JavaScript
var myObject = {
demoButton : function(thisIdentity) {
"use strict";
var myObj = this;
$(document).on('click', thisIdentity, function(e) {
e.preventDefault();
var trigger = $(this);
trigger.addClass('inactive_icon');
var param = trigger.attr("rel");
var item = param.split("_");
var section = trigger.attr("data-section");
$.ajax({
type: "POST",
url: "mod/check_login.php",
dataType: "json",
success: function(data)
{
if(data.job == 1)
{
$.post('mod/button_processing.php',{ id : item[0], job : item[1] }, function(data) {
var new_id = item[0] + '_' + data.job + '_' + item[2];
if (data.job != item[1]) {
if (data.job === 0) {
trigger.attr("rel", new_id);
if(section == 'postOpen')
{
trigger.css("color", "#677077");
}
else
{
trigger.css("color", "white");
}
myObject.updateCount(item[0]);
$.ajax({
type: "POST",
data : { aid : item[2], type : 1, pid : item[0] },
url: "mod/mark_notifications.php"
});
}
else if(data.job === 1)
{
trigger.attr("rel", new_id);
trigger.css("color", "red");
myObject.updateCount(item[0]);
$.post('mod/add_notification.php',{ pid : item[0], paId : item[2], type : 1 }, function(data) {
if(data.nid != false)
{
var action = 'like';
myObj.conn.sendMsg(item[2], data.nid, action);
}
}, 'json');
}
else if(data.job === 2)
{
mscAlert({
title: 'Error',
subtitle: 'Try some time later.',
okText: 'Close',
});
}
}
}, 'json');
trigger.removeClass('inactive_icon');
}
else if(data.job == 0)
{
var param = {'c': 2};
$('.element_to_pop_up').bPopup({
content: 'ajax',
contentContainer: '.content',
loadUrl: 'mod/filler.php',
loadData: param,
modalColor: '#fff',
positionStyle: 'fixed',
});
}
}
});
});
}, //other functions
}
$(function() { myObject.likeButton(".like"); }
HTML
<button class="like" //other attributes>Like</button>
如果有相同的请求，有没有办法阻止同步的AJAX请求 已经有效了吗？
非常感谢任何建议或参考。
答案 0 :(得分：0)
将检查添加到点击侦听器的开头将解决此问题：
var myObject = {
demoButton : function(thisIdentity) {
"use strict";
var myObj = this;
$(document).on('click', thisIdentity, function(e) {
e.preventDefault();
if (window.inAjax) {
return false;
}
window.inAjax = true;
var trigger = $(this);
trigger.addClass('inactive_icon');
var param = trigger.attr("rel");
var item = param.split("_");
var section = trigger.attr("data-section");
$.ajax({
type: "POST",
url: "mod/check_login.php",
dataType: "json",
success: function(data)
{
if(data.job == 1)
{
$.post('mod/button_processing.php',{ id : item[0], job : item[1] }, function(data) {
var new_id = item[0] + '_' + data.job + '_' + item[2];
if (data.job != item[1]) {
if (data.job === 0) {
trigger.attr("rel", new_id);
if(section == 'postOpen')
{
trigger.css("color", "#677077");
}
else
{
trigger.css("color", "white");
}
myObject.updateCount(item[0]);
$.ajax({
type: "POST",
data : { aid : item[2], type : 1, pid : item[0] },
url: "mod/mark_notifications.php"
});
}
else if(data.job === 1)
{
trigger.attr("rel", new_id);
trigger.css("color", "red");
myObject.updateCount(item[0]);
$.post('mod/add_notification.php',{ pid : item[0], paId : item[2], type : 1 }, function(data) {
if(data.nid != false)
{
var action = 'like';
myObj.conn.sendMsg(item[2], data.nid, action);
}
}, 'json');
}
else if(data.job === 2)
{
mscAlert({
title: 'Error',
subtitle: 'Try some time later.',
okText: 'Close',
});
}
}
window.inAjax = false;
}, 'json');
trigger.removeClass('inactive_icon');
}
else if(data.job == 0)
{
var param = {'c': 2};
$('.element_to_pop_up').bPopup({
content: 'ajax',
contentContainer: '.content',
loadUrl: 'mod/filler.php',
loadData: param,
modalColor: '#fff',
positionStyle: 'fixed',
});
}
}
});
});
}, //other functions
}
$(function() { myObject.likeButton(".like"); }
答案 1 :(得分：0)
如果您的服务器和网络运行速度很快，并且您的客户端处理“慢”，请双击启动ajax呼叫的按钮，那么您仍然可以进行双重呼叫。
您可以强制超时，然后用户可以进行两次相同的ajax调用。在ajax调用周围设置一个条件：
// ...
var $this = $(this);
if ($this.data('timeout') != undefined) {
$this.data('timeout', true);
setTimeout(function() { $this.removeData('timeout'); }, 1000);
$.ajax({
// ...
用户只能在一秒钟内再次点击一次。如果您希望他再也无法再次点击，请删除setTimeout。或者给他更多时间2000毫秒或更长时间。或者，当您的用户被允许第二次发送数据时，您可以从表单中的另一个事件（输入上的onchange（）？）中删除Data（'timeout'）。一切都取决于你想要做什么。
答案 2 :(得分：0)
单击时立即禁用按钮将解决此问题。
答案 3 :(得分：0)
我同意@Stuart的回答。
你也可以在以下黑客攻击 -
当用户点击按钮时
1.将按钮名称重命名为“please wait..”并删除onclick（如果有）。
2.如果你只是在没有任何验证的情况下提交表格（比如onsubmit='return validation()'）那么点1就会做同样的伎俩。