如何临时禁用Ajax调用中的按钮？

Question

In my Javascript code, I wrote an Ajax call where a couple of for loop cycles call two JSON files; 在我的Javascript代码中，我编写了一个Ajax调用，其中几个for loop周期调用了两个JSON文件。 some functions are called when some events occur and a Search button is clicked: tables containing data from the APIs requests are displayed. 当发生某些事件并单击“ Search按钮时，将调用某些函数：显示包含来自API请求的数据的表。

I want to temporarily disable the Search button when these data are looked for within the Ajax calls, and then enable it again once the operation was carried out, in a way similar to what happens in the setTimeout() Method, but without having to set a number of milliseconds (I cannot specify it previously for the number of milliseconds depends on the slowness of the internet connection and other factors...). 我想在Ajax调用中查找这些数据时暂时禁用“ Search按钮，然后在执行操作后再次启用它，其方式类似于setTimeout()方法中发生的方式，但不必设置毫秒数（我之前无法指定毫秒数，具体取决于互联网连接的速度和其他因素...）。

How to set the .prop("disabled", false); 如何设置.prop("disabled", false); temporarily within a callback function? 暂时在回调函数中？ In other terms, how to temporarily disable a button within an Ajax call? 换句话说，如何在Ajax调用中临时禁用按钮？

Answer 1

You can make use of beforeSend and complete for this, 您可以使用beforeSend并complete此操作，

$.ajax({
    type: 'POST',
    url: url,
    data: data,
    beforeSend: function() {
        // disable your button here
        .prop("disabled", true);
    },
    success: function(data) {
        //success
    },
    error: function(xhr) { // if error occured
    },
    complete: function() {
        // enable your button here
        .prop("disabled", false);
    }
});

Answer 2

inject the object instance into the event handlers. 将对象实例注入事件处理程序。

Checkout the possible event handlers here: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress 在此处签出可能的事件处理程序： https : //developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress

instead of Console.log call our object.prop("disabled",false") there 代替Console.log调用我们的object.prop("disabled",false")

Answer 3

using JavaScript Fetch API 使用JavaScript Fetch API

 <!DOCTYPE html> <html> <body> <div> <button type="button" id="btn1" onclick="loadData()">Change Content</button> <div id="response"> </div> </div> <script> function loadData() { document.getElementById("btn1").disabled = true; fetch("https://jsonplaceholder.typicode.com/todos/1") .then((resp) => resp.text()) // Transform the response into text .then((data) => { document.getElementById("response").innerHTML = data; document.getElementById("btn1").disabled = false; }); } </script> </body> </html>

using plain old javascript 使用普通的旧javascript

 <!DOCTYPE html> <html> <body> <div> <button type="button" id="btn1" onclick="loadData()">Change Content</button> <div id="response"> </div> </div> <script> function loadData() { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.status == 200) { document.getElementById("response").innerHTML = this.responseText; } document.getElementById("btn1").disabled = false; }; xhttp.open("GET", "https://jsonplaceholder.typicode.com/todos/1", true); xhttp.send(); document.getElementById("btn1").disabled = true; document.getElementById("response").innerHTML = ''; } </script> </body> </html>

如何临时禁用Ajax调用中的按钮？

问题描述

3 个解决方案

解决方案1
2 已采纳 2019-07-02 11:13:59

解决方案2
0 2019-07-02 11:14:05

解决方案3
0 2019-07-02 11:41:23

如何临时禁用Ajax调用中的按钮？

问题描述

3 个解决方案

解决方案1 2 已采纳 2019-07-02 11:13:59

解决方案2 0 2019-07-02 11:14:05

解决方案3 0 2019-07-02 11:41:23

解决方案1
2 已采纳 2019-07-02 11:13:59

解决方案2
0 2019-07-02 11:14:05

解决方案3
0 2019-07-02 11:41:23