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

Question

标题几乎已经说明了一切。如何在 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。

Answer 1

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

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

并在 ajax 调用停止时隐藏它

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

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