jquery ajax ($ .post), показывающий значок во время обработки запроса

Question

Я использую jQuery $ .post для ajax (например, заполнение selectbox со значением, выбранным в другом selectbox). я использовал следующий код для этого

$('#cmbState').change(function(){ 
$.post('<?php echo APP_URL."include/ajax.php"; ?>', {stateid: $(this).val(), option: 'getCitiesList'}, function(response){ 
    if(response != '') 
    { 
    $('#cmbCity').html(response); 
    } 
}) 
}); 

Код выше работает прекрасно, но не уведомляет пользователя о том, что Ajax запрос находится в процессе, и он должен немного подождать.

Я хочу показать изображение рядом с элементом управления html, который отображается до тех пор, пока не будет загружен ответ.

Я хочу получить ответ только с помощью jquery. Нашел что-то связанное с этим на jquery docs также ($ .ajax), но я хочу достичь этой функции, используя метод $ .post (если это возможно).

Пожалуйста, помогите мне с этим. любые ключи высоко оценили

благодаря

Answer 1

Вы можете использовать ajaxStart и ajaxComplete глобальный Ajax Events выполнить фрагмент кода, всякий раз, когда запрос AJAX начинается или завершается, например:

// show the '#loading' element when ajaxStart, and hide it when ajaxComplete 
$("#loading").bind("ajaxStart", function(){ 
    $(this).show(); 
}).bind("ajaxComplete", function(){ 
    $(this).hide(); 
}); 

Поступая таким образом, вам не нужно, чтобы добавить какой-либо логики для обработки сообщения загрузки по всем запросам Ajax, которые вы делаете.

Answer 2

$.ajax({ 
    url:'/', 
    data: params, 
    type:'POST', 
    beforeSend: function() { 
     alert("loading") 
    }, 
    success:function(html){ alert(html) } 
}); 

Поместите свой код загрузки внутри функции beforeSend, срабатывающая перед тем success вызывается.