How to get wait loader during AJAX call

问题

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 ?

Thank You

回答1:

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.

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.

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>  

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

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

Now after getting response from server again hide this div.

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

This way you can do.

来源：https://stackoverflow.com/questions/21694521/how-to-get-wait-loader-during-ajax-call