Question

我通过以下代码执行AJAX请求。它工作正常。问题是，将数据发布到数据库需要花费时间，但是启用了屏幕UI并允许在UI上执行其他操作。我想亲密用户 - 等待加载程序，正在进行，正在进行中或禁用UI 那种处理仍在进行中的暗示。

$.ajax({
    contentType: 'application/json; charset=utf-8',
    dataType: 'json',
    type: 'POST',
    url: '/travel/Submittraveller',
    data: f,
    success: function (jsonresult) {
        console.log("success");
        //.............other code....

    },
    failure: function (response) {
        console.log('error!!');
    }
});
});

请分享我如何实现这一目标？

谢谢

Answer 1

您可以在整个页面上显示一些指示waiting for response或wait for sometime（可能是gif图片）的图片，以便用户无法点击您网页的任何其他部分。

您可以在其中创建div，您可以添加图像以在整个页面上显示，最初隐藏该div。在Ajax调用之前显示你的div，并在得到Ajax的响应后再次隐藏该div。

例如：
你的分区

<div id="iframeloading" style= "display: none; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;">
     <img src="images/AnimatedProgressBar.gif" alt="loading" style="top: 50%; position: relative; left: 50%;"  />
</div>

最初它是隐藏的。现在你的ajax调用之前只显示这个div。

$("#iframeloading").show();  
$.ajax({   
     //rest of your code.

现在从服务器获得响应后再次隐藏此div。

success: function (jsonresult) {  
    $("#iframeloading").hide();
    console.log("success");  
   ///rest of your code.

这样你就可以做到。

如何在AJAX调用期间获取等待加载器

1 个答案: