AJAX 请求时禁用按钮

Posted 2023-05-08

【中文标题】AJAX 请求时禁用按钮

【英文标题】：Disable Button while AJAX Request

【发布时间】：2011-06-05 01:59:13

【问题描述】：

我试图在单击按钮后禁用它。我试过了：

$("#ajaxStart").click(function() 
    $("#ajaxStart").attr("disabled", true);
    $.ajax(
      url: 'http://localhost:8080/jQueryTest/test.json',
      data: 
        action: 'viewRekonInfo'
      ,
      type: 'post',
      success: function(response)
        //success process here                             
        $("#alertContainer").delay(1000).fadeOut(800);
       ,
      error: errorhandler,
      dataType: 'json'
    );    
    $("#ajaxStart").attr("disabled", false);
);

但该按钮并未被禁用。当我删除 $("#ajaxStart").attr("disabled", false); 时，该按钮被禁用。

虽然这没有按预期工作，但我认为代码顺序是正确的。任何帮助将不胜感激。

【问题讨论】：

遗憾的是，如果阻止用户再次单击所需的时间比用户执行另一次单击所需的时间长，则此处的任何答案都不起作用。例如，如果用户在我们禁用按钮或在其上动态添加元素之前非常快速地（有意或无意地）多次单击，则将注册多次单击。还没找到解决办法。

【参考方案1】：

把$("#ajaxStart").attr("disabled", false);放在success函数里面：

$("#ajaxStart").click(function() 
    $("#ajaxStart").attr("disabled", true);
    $.ajax(
        url: 'http://localhost:8080/jQueryTest/test.json',
        data:  
            action: 'viewRekonInfo'
        ,
        type: 'post',
        success: function(response)
            //success process here
            $("#alertContainer").delay(1000).fadeOut(800);

            $("#ajaxStart").attr("disabled", false);
        ,
        error: errorhandler,
        dataType: 'json'
    );
);

这将确保在数据加载后将disable设置为false...目前您在同一个点击功能中禁用和启用按钮，即同时。

【讨论】：

其实我会把它放在complete回调中，因为如果请求失败，我不一定希望按钮保持禁用状态。

【参考方案2】：

在您的代码中，您只需在单击同一按钮时禁用和启用该按钮。

您必须在完成 AJAX 调用时启用它

类似的东西

           success: function(response)
                    $("#ajaxStart").attr("disabled", false); 
                       //success process here
                       $("#alertContainer").delay(1000).fadeOut(800);
                   ,

【参考方案3】：

我通过定义两个 jquery 函数解决了这个问题：

var showDisableLayer = function() 
  $('<div id="loading" style="position:fixed; z-index: 2147483647; top:0; left:0; background-color: white; opacity:0.0;filter:alpha(opacity=0);"></div>').appendTo(document.body);
  $("#loading").height($(document).height());
  $("#loading").width($(document).width());
;

var hideDisableLayer = function() 
    $("#loading").remove();
;

第一个函数在一切之上创建一个层。该图层是白色且完全不透明的原因是，否则 IE 允许您单击它。

在做我的 ajax 时，我是这样做的：

$("#ajaxStart").click(function()           
   showDisableLayer(); // Show the layer of glass.
   $.ajax(              
      url: 'http://localhost:8080/jQueryTest/test.json',              
      data:                    
          action: 'viewRekonInfo'              
      , 
      type: 'post',              
      success: function(response)                  
         //success process here                  
         $("#alertContainer").delay(1000).fadeOut(800);                                     
         hideDisableLayer(); // Hides the layer of glass.
      ,
      error: errorhandler,              
      dataType: 'json'          
   );      
); 

【参考方案4】：

我通过使用 ajax 的全局函数解决了这个问题

            $(document).ajaxStart(function () 
            $("#btnSubmit").attr("disabled", true);
        );
        $(document).ajaxComplete(function () 
            $("#btnSubmit").attr("disabled", false);
        );

这里是文档link。

【参考方案5】：

$.ajax() 调用“不会阻塞”——这意味着它会立即返回，然后您立即启用该按钮，因此该按钮不会被禁用。

您可以在 AJAX 成功、出错或以其他方式完成时启用按钮，使用 complete:http://api.jquery.com/jQuery.ajax/

完成（XMLHttpRequest， 文本状态）

一个函数 请求完成时调用 （在成功和错误回调之后 执行）。函数通过 两个参数： XMLHttpRequest 对象和分类的字符串 请求的状态（“成功”， “未修改”、“错误”、“超时”或 “解析器错误”）。这是一个 Ajax 事件。