在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);
              }
       });  

    }); 

});