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

<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.

这样你就可以做到.