Question

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

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

作为函数中的第一件事，然后我做一些基本的东西，比如document.getElementById（'user'）等来设置一些变量并检查输入，但只要ajax函数在那里它就不会显示甚至是JQ Mobile的微调器。除非我调试并单步执行代码，否则spinner和div显示正常。我尝试了setTimeout并将其放在ajax调用的beforeSend区域。否则一切正常。 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);
              }
       });  

    }); 

});

在ajax帖子中显示加载div

2 个答案: