如何在 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 或类似的东西
标题说的差不多了。如何在 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 或类似的东西