如何在Phonegap中进行AJAX调用时添加加载屏幕

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

本文关键字：调用 添加 加载 屏幕 AJAX Phonegap      更新时间：2024-01-23

Title几乎说明了这一点。如何在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 Mobile。

要在每个ajax调用上全局显示加载页面，可以使用以下代码：

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

并在ajax调用停止时将其隐藏

$( document ).ajaxStop(function() {
    $( "#loading" ).hide();
});

您需要一个带有id加载的全屏div，以及一个加载图像gif或类似的东西

不要忘记使用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,
        });

您可以使用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');  
    }
  });
相关文章：