按钮上的数据加载消息无法与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的使用被认为是一种可怕的做法。应不惜一切代价避免使用它。