Загрузка gif-изображения при запуске jQuery ajax

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

$.ajax({
  url: "/answer_checker.php",
  global: false, type: "POST", 
  data: ({...clipped...}), 
  cache: false,
  beforeSend: function() {
    $('#response').text('Loading...');
  },
  success: function(html) {
    $('#response').html(html);
  }
}

Спасибо заранее.

Ответы

Ответ 1

У меня есть решение, возможно, это не лучший способ, но он работал в этом случае.

$('input').keyup(function () {

  $('#response').text('loading...');

  $.ajax({
    url: "/answer_checker.php",
    global: false, type: "POST", 
    data: ({...clipped...}), 
    cache: false,
    success: function(html) {
      $('#response').html(html);
    }
  });
});

Устанавливая содержимое резонатора перед вызовом функции ajax, он остается отображающим текст загрузки, пока вызов ajax не обновит один и тот же контент.

Спасибо всем, кто нашел время, чтобы ответить.

Алан

Ответ 2

У меня была аналогичная проблема. Чтобы решить проблему, я заменил .text в разделе beforeSend на .html и создал тэг html для вставки в элемент, который содержит мой статус. Функция успеха не заменила содержимое, созданное функцией .text(), но оно заменило содержимое, созданное функцией .html().

$.ajax({
  url: "/answer_checker.php",
  global: false, type: "POST", 
  data: ({...clipped...}), 
  cache: false,
  beforeSend: function() {
    $('#response').html("<img src='/images/loading.gif' />");
  },
  success: function(html) {
    $('#response').html(html);
  }
}

Ответ 3

У вас ~~есть~~ отсутствовала запятая после cache: false

Ответ 4

Вы также можете использовать следующее:

$('#tblLoading').ajaxStart(function() { $(this).show(); });
$('#tblLoading').ajaxComplete(function() { $(this).hide(); });