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

Question

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

$('#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 global 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.