如何提醒用戶，當他們無法訪問服務器

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 
});