javascript - 按钮上的数据加载消息不适用于 ajax 调用

Question

我正在进行 ajax 调用来 POST 一些数据，并且需要很长时间才能获得结果。所以我想在我的按钮上显示数据加载消息，直到我的 ajax 请求完成。这是我的 JavaScript 代码。

$("#add").button('loading');
$.ajax({
    type: 'POST',
    url: url,
    async: false,
    success: function(data) {
        $("#add").button('reset');
    }
});

这是我的 html 页面中的按钮定义

<div class="col-lg-12">
    <button id="add" class=" btn btn-success btn-sm info" type="button" data-loading-text="Adding" onclick="create()">Add New</button>
</div>

如果我注释掉 AJAX 调用，我可以在按钮上看到数据加载消息，但如果允许 AJAX 调用发生，我就看不到数据加载消息。我怎样才能做到这一点？

谢谢。

Answer 1

问题是因为您使用的是 async: false。这会锁定浏览器，直到请求完成，因此在此期间无法更新 UI。要解决该问题，请删除 async: false:

$("#add").button('loading');
$.ajax({
    type: 'POST',
    url: url,
    success: function(data) {
        $("#add").button('reset');
    }
});

由于这个原因，使用async: false被认为是糟糕的做法。应不惜一切代价避免使用它。