jQuery AJAX 请求时禁用按钮

Disable Button while AJAX Request

提问by Adi Sembiring

I'm trying to disable a button after it's clicked. I have tried:

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

$("#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);
});

but the button is not getting disabled. When I remove $("#ajaxStart").attr("disabled", false);the button gets disabled.

但按钮没有被禁用。当我删除$("#ajaxStart").attr("disabled", false);按钮被禁用。

While this is not working as expected, I think the code sequence is correct. Any help will be appreciated.

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

回答by Damien-Wright

Put $("#ajaxStart").attr("disabled", false);inside the success function:

放入$("#ajaxStart").attr("disabled", false);成功函数：

$("#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'
    });
});

This will ensure that disable is set to false afterthe data has loaded... Currently you disable and enable the button in the same click function, ie at the same time.

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

回答by RameshVel

In your code, you just disable & enable the button on the same button click,.

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

You have to enable it inside the completion of AJAX call

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

something like this

像这样的东西

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

回答by Kaj Bonfils

I have solved this by defining two jquery functions:

我通过定义两个 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();
};

The first function creates a layer on top of everything. The reason the layer is white and completely opaque, is that otherwise, IE allows you to click through it.

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

When doing my ajax, i do like this:

做我的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'          
   });      
}); 

回答by ???

I solved this by using global function of ajax

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

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

here is documentation link.

这是文档链接。

回答by nonopolarity

The $.ajax()call "will not block" -- that means it will return immediately, and then you enable the button immediately, so the button is not disabled.

该$.ajax()呼叫“不会阻止” -这意味着它会立即返回，然后立即启用按钮，所以未禁用按钮。

You can enable the button when the AJAX is successful, has error, or is otherwise finished, by using complete: http://api.jquery.com/jQuery.ajax/

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

complete(XMLHttpRequest, textStatus)

A function to be called when the request finishes (after success and error callbacks are executed). The function gets passed two arguments: The XMLHttpRequest object and a string categorizing the status of the request ("success", "notmodified", "error", "timeout", or "parsererror"). This is an Ajax Event.

完成（XMLHttpRequest，textStatus）

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