Как получить загрузчик ожидания во время вызова AJAX

Question

Я делаю запрос AJAX через код ниже. он отлично работает. Проблема в том, что для публикации данных в базу данных требуется время, но экранный интерфейс включен и позволяет выполнять другие действия в пользовательском интерфейсе. Я хочу интимного пользователя для - Подождите, загрузчик, обработка, в процессе или отключите 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 (это может быть рисунок) на всей странице, так что пользователь не могу иметь возможность нажать на любой другой части вашей страницы.

Вы можете создать свой div внутри него, вы можете добавить изображение для отображения на всей странице, изначально скрыть это 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> 

Первоначально это hidden.Now до вашего AJAX вызова просто показать это DIV.

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

Теперь после получения ответа от сервера снова скройте этот div.

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

Этот способ вы можете сделать.