如何在以下场景中显示AJAX请求的响应之前显示图像加载器?

时间:2014-11-27 17:48:40

标签: javascript php jquery ajax loader

以下是我写过的jQuery-AJAX代码:

$('#request_form').submit(function(e) {
  var form = $(this);
  var formdata = false;

  if(window.FormData) {
    formdata = new FormData(form[0]);
  }

  var formAction = form.attr('action');

  $.ajax({
    url         : 'xyz.php',
    type        : 'POST',    
    cache       : false,
    data        : formdata ? formdata : form.serialize(),
    contentType : false,
    processData : false,

    success: function(response) {
      var responseObject = $.parseJSON(response);    
      if(responseObject.error_message) {
        if ($(".alert-dismissible")[0]) {
          $('.alert-dismissible').remove();   
        }  
        var htmlString = "<div class='alert alert-danger alert-dismissible' role='alert'><button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;</button>"+responseObject.error_message+"</div>";    
        $(htmlString).insertBefore('div.modal-body #request_form');        
      } else {
        $('#Modal1').modal('hide');
        $('#Modal2').modal('show');       
      }
    }
  });
  e.preventDefault();
});

我希望在网页上显示加载程序图像,直到某些响应来自PHP方面。应该以这样的方式显示加载器,即用户不能在浏览器窗口中的任何位置单击。一旦响应(错误/成功)来自服务器(即PHP端),加载器映像应该消失并让流程完成它们的工作。

有人可以帮我这方面吗?

如果您想了解有关我的问题的任何进一步信息,请告诉我。

提前致谢。

1 个答案:

答案 0 :(得分:2)

在ajax查询之前添加:

$('idOfYourLoader').fadeIn();

在ajax查询的成功/错误部分结束时添加:

$('idOfYourLoader').fadeOut();