Question

我正在对POST一些数据进行ajax调用，并且需要很长时间才能得到结果。所以我想在我的按钮上输入数据加载消息，直到我的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的使用被认为是可怕的做法。应不惜一切代价避免使用它。

不使用ajax调用的按钮上的数据加载消息

1 个答案: