如何提醒用户，当他们无法访问服务器

Question

var serviceURL = "http://mywebsite.com/mobile/"; 
 

 
var employees; 
 

 
$(window).load(function() { 
 
\t setTimeout(getEmployeeList, 100); 
 
}); 
 

 
function getEmployeeList() { 
 
\t $.getJSON(serviceURL + 'getemployees.php', function(data) { 
 
\t \t $('#employeeList li').remove(); 
 
\t \t employees = data.items; 
 
\t \t $.each(employees, function(index, employee) { 
 
\t \t \t $('#employeeList').append('<li><a href="reportlist.html?id=' + employee.id + '">' + 
 
\t \t \t \t \t '<img src="pics/' + employee.picture + '" class="list-icon"/>' + 
 
\t \t \t \t \t '<p class="line1">' + employee.firstName + ' ' + employee.lastName + '</p>' + 
 
\t \t \t \t \t '<p class="line2">' + employee.title + '</p>' + 
 
\t \t \t \t \t '<span class="bubble">' + employee.reportCount + '</span></a></li>'); 
 
\t \t }); 
 
\t \t setTimeout(function(){ 
 
\t \t \t scroll.refresh(); 
 
\t \t }); 
 
\t }); 
 
}

我与我的脚本的问题是，任何时候我尝试达到服务器，它是下来，我想我的应用程序要警惕人们，服务器宕机现在

Answer 1

var serviceURL = "http://mywebsite.com/mobile/"; 
 

 
var employees; 
 

 
$(window).load(function() { 
 
\t setTimeout(getEmployeeList, 100); 
 
}); 
 
// Use the ajaxError method to handle your error 
 
$(document).ajaxError(function(event, request, settings) { 
 
//Then you can use the .hide() to hide div alert users for error 
 
\t $('#errorserver').hide(); 
 
\t alert("Error accessing the server"); 
 
}); 
 

 
function getEmployeeList() { 
 
//Then you can use the .show() to show loading 
 
\t $('#errorserver').show(); 
 
\t $.getJSON(serviceURL + 'getemployees.php', function(data) { 
 
    //Then you can use the .hide() 
 
\t \t $('#errorserver').hide(); 
 
\t \t $('#employeeList li').remove(); 
 
\t \t employees = data.items; 
 
\t \t $.each(employees, function(index, employee) { 
 
\t \t \t $('#employeeList').append('<li><a href="reportlist.html?id=' + employee.id + '">' + 
 
\t \t \t \t \t '<img src="pics/' + employee.picture + '" class="list-icon"/>' + 
 
\t \t \t \t \t '<p class="line1">' + employee.firstName + ' ' + employee.lastName + '</p>' + 
 
\t \t \t \t \t '<p class="line2">' + employee.title + '</p>' + 
 
\t \t \t \t \t '<span class="bubble">' + employee.reportCount + '</span></a></li>'); 
 
\t \t }); 
 
\t \t setTimeout(function(){ 
 
\t \t \t scroll.refresh(); 
 
\t \t }); 
 
\t }); 
 
}

//Add this div to your html page 
 

 
    <div id="errorserver"/><img src="image/loading.png" alt="Loading please wait.."></div>

Answer 2

您可以选择使用.fail方法来处理错误：

$.getJSON(serviceURL + 'getemployees.php', function(data) { 
    // ... your implementation 
}).fail(function (err) { 
    // ... this callback will be invoked 
    // ... in case any error of the server 
});