在ajax发布期间显示加载div

Question

我有一个主要使用JQuery Mobile的移动应用程序。 我有一个使用POST的ajax函数，当我触发click事件时，似乎无法获得任何影响UI的东西。 我尝试设置

$('#cover').show(); 

作为函数中的第一件事，然后我做了一些基本的事情，例如document.getElementById（'user'）等，以设置一些变量并检查输入，但是只要ajax函数存在，它就不会显示div甚至JQ Mobile的微调器。 除非我调试并逐步执行代码，否则微调器和div会正常显示。 我尝试了setTimeout并将其放在ajax调用的beforeSend区域中。 否则一切正常。 使用GET似乎效果更好，我不确定这是否与GET有关。

$.ajax({                
    cache: false,
    type: "POST",
    async: false,
    url: urlString,
    data: jsonstring,
    contentType: "application/json",
    dataType: "json",
    success: function (data) {
        JSONobj = JSON.parse(data);         
    },
    beforeSend: function(xhr){
          //console.log('BeforeSend');
    },
    complete: function (xhr) {
        //console.log('Complete');
    },
    error: function (xhr, status, error) {
      console.log(error);
    }
});

Answer 1

您可以使用Ajax Global处理程序来处理此问题：

$(document). 
    .ajaxStart(function(){
        $('#cover').show();
    })
    .ajaxStop(function(){
        $('#cover').hide();
    });

这样，您不必担心在单个Ajax调用中显示/隐藏覆盖。

Answer 2

尝试这个

$("#someButton").click(function(e){

   e.preventDefault() //if you want to prevent default action

    $('#cover').fadeIn(100,function(){

       $.ajax({     
              url: "someurl",
              data: "Somedata",
              contentType: "application/json",
              dataType: "json",        
              },
              success: function (data) {
                   JSONobj = JSON.parse(data);
                   $('#cover').fadeOut(100);        
              },
               complete: function (xhr) {
                   $('#cover').fadeOut(100);
              }
       });  

    }); 

});