前端点击按钮调用ajax,【Web前端问题】如何防止用户在ajax请求没有成功之前，点击按钮再次调用ajax？...

假设我现在有几个用 li 标签做的按钮，还有时间控件和下拉框。li 的点击操作、时间控件的选择时间操作、下拉框的change事件都用调用同一个ajax。请问，如何在用户做某一种操作调用ajax请求成功之前，阻止用户再次点击其它标签进行ajax请求操作？

回答：

例子如下，第一种是拦截重复请求，第二种每次请求都接受同时丢弃旧请求。

如果是拦截重复请求，通常还要给按钮加上 disabled 状态切换。

// 方法一，通过加载状态判断

// 默认值

var loading;

function ajaxload() {

// 先判断，为 true 就拦截

if (loading === true) {

alert('loading... try later.');

return false;

}

// 发出请求之前先设置状态 true

loading = true;

$.ajax({

url: 'test.html'

}).done(function() {

alert('done!');

// 完成后设为 false

loading = false;

});

}

// 方法二，有新请求直接丢弃旧请求

var xhr;

function ajaxload() {

// 之前如果有未完成的请求直接丢弃

// 这是字面意思的丢弃，只是客户端丢弃请求

// 在这之前服务器如果收到了请求还是会返回结果的

// 只是客户端不再理会服务器的响应而已

if (xhr && xhr.readyState != 4) {

xhr.abort();

}

xhr = $.ajax({

url: 'test.html'

}).done(function() {

alert('done!');

});

}

回答：

你可以给把那些标签归个类，额外添加两个属性，一个类似组的标志，比如可以添加一个空属性的class属性用于组名，再一个类似开关的标志，比如处于请求的标签多了on的属性，当要发生请求的时候，看组内有没有on属性开关处于开的状态即可，此种实行只要基于jquery的contains选择器就可以。

回答：

用一个变量充当开关，每次发起 ajax 之后开关关闭，ajax 请求成功之后，再将变量恢复初始值

回答：

通过一个布尔值控制,true就是可以请求，false就是不可以请求，点击后为false，ajax请求成功为true

回答：

创建一个控制开关，每次点击后FALSE，请求完成 变为TRUE，如此往复