Javascript 在ajax post期间显示加载div

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

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

作为函数中的第一件事，我做了一些基本的事情，比如document.getElementById（'user'）等来设置一些变量和检查输入，但是只要ajax函数在那里，它就不会显示div，甚至不会显示JQ Mobile的微调器。除非我调试并逐步完成代码，否则微调器和div会显示得很好。我尝试设置Timeout并将其放在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);
    }
});

试试这个

$("#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);
              }
       });  

    }); 

});

---

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

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

---

通过这种方式，您不必担心在单个Ajax调用上显示/隐藏覆盖。

您正在指定

async:false

，这会将其转换为同步调用。在进行非ajax调用之前，应该使“loading”div完全显示出来。哦，在调用过程中，页面可能会冻结，主要是因为它被冻结了。当您有$（“#id”）时，不要使用document.getElementById。我以前考虑过异步：true，我会再试一次。我想我必须在那里加载所有的objects属性，而不是在一个单独的函数中。我刚刚将它设为async:true，并将所有JSON对象填充器移到success区域，这似乎是可行的。谢谢TheZ的答案是正确的，但我不确定如何将其设置为答案。