javascript - 在 Ajax 启动停止事件时禁用和启用提交的响应方法

Question

我尝试了以下方法：

1) 显示/隐藏

$('button').ajaxStart(function() {
 $(this).hide();
});
$('button').ajaxStop(function() {
 $(this).show();
});

2) 可见/隐藏

$('button').ajaxStart(function() {
 $(this).css({visibility, 'hidden'});
});
$('button').ajaxStop(function() {
 $(this).css({visibility, 'visible'});
});

3）添加/删除类

$('button').ajaxStart(function() {
 $(this).addClass('invisible');
});
$('button').ajaxStop(function() {
 $(this).removeClass('invisible');
});

4) 启用/禁用

$('button').ajaxStart(function() {
 $(this).attr('disabled','disabled')
});
$('button').ajaxStop(function() {
 $(this).removeAttr('disabled');
});

到目前为止，只有 Show/Hide 方法的响应速度足够快，可以在 1 秒内执行。剩下的时间在 1-2 秒之间，这明显很长。但是，我希望通过一些明显的 CSS 更改来显示但禁用该按钮。是否有更灵敏的方式来临时启用和禁用提交按钮？

Answer 1

试试这个：

$("button").click(function() {

    // disable the submit button before the ajax call...
    $(this).attr('disabled','disabled');
    $.ajax({
        url: 'yoururl.html',
        data: {},
        type: 'post',
        success: function(response){
            // enable the submit button after ajax call success...
            $(this).removeAttr('disabled');
        },
        error: function(){
            // error process here
            $(this).removeAttr('disabled');
        },
        dataType: 'json'
    });
});