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

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.

这样就可以了。