在jQuery ajax运行时加载gif图像

Question

我正在尝试在我的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);
  }
}

提前致谢.

Answer 1

我遇到了类似的问题.为了解决我的问题,我用.html替换了beforeSend部分中的.text,并创建了一个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);
  }
}

Answer 2

我有一个解决方案,它可能不是最好的方法,但它在这种情况下有效.

$('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调用更新相同的内容.

感谢所有花时间回答的人.

艾伦