jquery - 如何在 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

您可以在整个页面上显示一些表示等待响应或等待一段时间的图像(可能是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.

这样就可以了。