如何在AJAX调用期间获取等待加载程序 [英] How to get wait loader during AJAX call

问题描述

我通过以下代码执行AJAX请求.它工作正常. 问题是，将数据发布到数据库需要花费时间，但是启用了屏幕UI并允许对UI执行其他操作. 我想让用户知道-正在等待加载程序，正在处理中，或者禁用UI 提示正在处理中.

I do AJAX request through below code. it works fine. Problem is, it takes time to post the data to database but screen UI is enable and allow to do other action on UI. I want to intimate user for - Wait loader, prcessing, in progress or disable the UI kind of intimation that processing is still in progress.

$.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!!');
    }
});
});

请分享给我我该如何实现?

Please share me how can i achieve this ?

谢谢

推荐答案

您可能会在整个页面上显示一些表示waiting for response或wait for sometime的图像(可能是gif图像)，以使用户无法点击页面的任何其他部分.

You may show some image that indicate waiting for response or wait for sometime (it may be gif image) on your whole page so that user cant able to click on any other part of your page.

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

You can create your div inside it you can add image to display on whole page initially hide that div. Show your div just before your Ajax call and again hide that div after getting response from Ajax.

例如:
您的Div

For Example :
Your 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.

Initially it is hidden.Now before your ajax call just show this div.

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

现在，在再次从服务器获取响应后，隐藏此div.

Now after getting response from server again hide this div.

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

这样您就可以做到.

这篇关于如何在AJAX调用期间获取等待加载程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！