如何在 Phonegap 中进行 AJAX 通话时添加加载屏幕?

How to add a loading screen when doing a AJAX call in Phonegap?

标题说的差不多了。如何在 AJAX 为 运行 时添加加载屏幕并在 AJAX 完成后使加载屏幕消失 运行?

我的AJAX函数:

$("#loginBtn").on("click", function(e){
e.preventDefault();

var loginForm = document.getElementById("loginForm");
var login_data = $('#loginForm').serialize();

  $.ajax({
    type: "POST",
    url: serverURL + "loginProcess.php",
    data: login_data,
    dataType:"json",
    success: function(data){
      localStorage.setItem('id', JSON.stringify(data));
    },
    error:  function(jqXHR, textStatus, errorThrown) {
      navigator.notification.alert('Invalid Email or Password!',null,'Error', 'Done');  
    }
  }); 

});

注意:我没有使用 jQuery 手机。

您可以使用 jQuery BlockUI 插件

您的代码将是

var blockUI = function(){
    $.blockUI({ 
        fadeIn: 1000, 
        timeout:   0,
        message:'<h1>Loading...</h1>',
        //css: { border: '5px solid red'},
        onBlock: function() {
            $("#tab3").addClass("myClass");
        }
    });
}
$("#loginBtn").on("click", function(e){
e.preventDefault();

var loginForm = document.getElementById("loginForm");
var login_data = $('#loginForm').serialize();

  $.ajax({
    type: "POST",
    url: serverURL + "loginProcess.php",
    data: login_data,
    dataType:"json",
    beforeSend:function(){
    blockUI(); //Call block function
    },
    success: function(data){
      localStorage.setItem('id', JSON.stringify(data));
    },
    error:  function(jqXHR, textStatus, errorThrown) {
      navigator.notification.alert('Invalid Email or Password!',null,'Error', 'Done');  
    }
  }); 

不要忘记使用 async:true 并使用 $.mobile.loading("show"); 加载程序显示

jQuery.ajax({
                url: serverURL + "loginProcess.php", 
                global: true,
                type: "POST",
                data: login_data,
                dataType:"json",
                async: true,
                timeout: 40000,
                beforeSend: function() {
                     $.mobile.loading("show");
                },
                complete: function(){
                     $.mobile.loading("hide");
                },
                success: loading_complete_list,

        });

要在每次 ajax 调用时全局显示加载页面,您可以使用此代码:

$( document ).ajaxStart(function() {
    $( "#loading" ).show();
});

并在 ajax 调用 stop

时隐藏它
$( document ).ajaxStop(function() {
    $( "#loading" ).hide();
});

你需要全屏 div 加载 id,以及加载图像 gif 或类似的东西