Comment faire pour afficher un JSON message d'erreur?
Je suis actuellement à l'élaboration d'un tumblr thème et ont construit un jQuery JSON thingamabob qui utilise le Tumblr de l'API pour effectuer les opérations suivantes:
L'utilisateur, cliquez sur le "post" type de lien (par exemple, Messages Vidéo), à l'étape de jQuery serait d'utiliser JSON pour saisir tous les articles liés à ce type, puis d'afficher de manière dynamique dans une zone désignée.
Maintenant tout fonctionne absolument peachy, sauf qu'avec Tumblr étant Tumblr et leurs serveurs de prendre un coup chaque maintenant et puis, le Tumblr de l'API thingy est parfois hors ligne. Maintenant, je ne peux pas prévoir quand cette fonction sera vers le bas, c'est pourquoi je veux afficher des message d'erreur générique si JSON (pour quelque raison que ce soit) n'a pas pu charger le post.
Vous verrez que j'ai déjà écrit un peu de code pour afficher un message d'erreur lors de jQuery ne pouvez pas trouver tous les messages liés à ce type de poste, MAIS il ne couvre pas toutes les erreurs de serveur. Remarque: parfois, j'ai cette erreur:
Échec du chargement de la ressource: le serveur a répondu avec un statut de 503 (Service Temporairement Indisponible)
C'est pour cette 503 message d'Erreur que j'ai besoin d'écrire un peu de code, mais je suis un peu paumé 🙂
Voici le jQuery, JSON code:
$('ul.right li').find('a').click(function() {
var postType = this.className;
var count = 0;
byCategory(postType);
return false;
function byCategory(postType, callback) {
$.getJSON('{URL}/api/read/json?type=' + postType + '&callback=?', function(data) {
var article = [];
$.each(data.posts, function(i, item) {
//i = index
//item = data for a particular post
switch(item.type) {
case 'photo':
article[i] = '<div class="post_wrap"><div class="photo" style="padding-bottom:5px;">'
+ '<a href="' + item.url + '" title="{Title}" class="type_icon"><img src="http://static.tumblr.com/ewjv7ap/XSTldh6ds/photo_icon.png" alt="type_icon"/></a>'
+ '<a href="' + item.url + '" title="{Title}"><img src="'
+ item['photo-url-500']
+ '"alt="image" /></a></div></div>';
count = 1;
break;
case 'video':
article[i] = '<div class="post_wrap"><div class="video" style="padding-bottom:5px;">'
+ '<a href="' + item.url + '" title="{Title}" class="type_icon">'
+ '<img src="http://static.tumblr.com/ewjv7ap/nuSldhclv/video_icon.png" alt="type_icon"/></a>'
+ '<span style="margin: auto;">'
+ item['video-player']
+ '</span>'
+ '</div></div>';
count = 1;
break;
case 'audio':
if (use_IE == true) {
article[i] = '<div class="post_wrap"><div class="regular">'
+ '<a href="' + item.url + '" title="{Title}" class="type_icon"><img src="http://static.tumblr.com/ewjv7ap/R50ldh5uj/audio_icon.png" alt="type_icon"/></a>'
+ '<h3><a href="'
+ item.url
+ '">'
+ item['id3-artist']
+' - '
+ item['id3-title']
+ '</a></h3>'
+ '</div></div>';
} else {
article[i] = '<div class="post_wrap"><div class="regular">'
+ '<a href="' + item.url + '" title="{Title}" class="type_icon"><img src="http://static.tumblr.com/ewjv7ap/R50ldh5uj/audio_icon.png" alt="type_icon"/></a>'
+ '<h3><a href="'
+ item.url
+ '">'
+ item['id3-artist']
+' - '
+ item['id3-title']
+ '</a></h3><div class="player">'
+ item['audio-player']
+ '</div>'
+ '</div></div>';
};
count = 1;
break;
case 'regular':
article[i] = '<div class="post_wrap"><div class="regular">'
+ '<a href="' + item.url + '" title="{Title}" class="type_icon"><img src="http://static.tumblr.com/ewjv7ap/dwxldhck1/regular_icon.png" alt="type_icon"/></a><h3><a href="'
+ item.url
+ '">'
+ item['regular-title']
+ '</a></h3><div class="description_container">'
+ item['regular-body']
+ '</div></div></div>';
count = 1;
break;
case 'quote':
article[i] = '<div class="post_wrap"><div class="quote">'
+ '<a href="' + item.url + '" title="{Title}" class="type_icon"><img src="http://static.tumblr.com/ewjv7ap/loEldhcpr/quote_icon.png" alt="type_icon"/></a><blockquote><h3><a href="' + item.url + '" title="{Title}">'
+ item['quote-text']
+ '</a></h3></blockquote><cite>- '
+ item['quote-source']
+ '</cite></div></div>';
count = 1;
break;
case 'conversation':
article[i] = '<div class="post_wrap"><div class="chat">'
+ '<a href="' + item.url + '" title="{Title}" class="type_icon"><img src="http://static.tumblr.com/ewjv7ap/MVuldhcth/conversation_icon.png" alt="type_icon"/></a><h3><a href="'
+ item.url
+ '">'
+ item['conversation-title']
+ '</a></h3></div></div>';
count = 1;
break;
case 'link':
article[i] = '<div class="post_wrap"><div class="link">'
+ '<a href="' + item.url + '" title="{Title}" class="type_icon"><img src="http://static.tumblr.com/ewjv7ap/EQGldhc30/link_icon.png" alt="type_icon"/></a><h3><a href="'
+ item['link-url']
+ '" target="_blank">'
+ item['link-text']
+ '</a></h3></div></div>';
count = 1;
break;
default:
alert('No Entries Found.');
};
}) //end each
if (!(count == 0)) {
$('#content_right')
.hide('fast')
.html('<div class="first_div"><span class="left_corner"></span><span class="right_corner"></span><h2>Displaying '
+ postType
+ ' Posts Only</h2></div>'
+ article.join(''))
.slideDown('fast')
} else {
$('#content_right')
.hide('fast')
.html('<div class="first_div"><span class="left_corner"></span><span class="right_corner"></span><h2>Hmmm, currently there are no '
+ postType
+ ' posts to display</h2></div>')
.slideDown('fast')
}
//end getJSON
}); //end byCategory
}
});Si vous souhaitez voir la démo en action, découvrez Elegantem mais notez que tout peut travail absolument parfait pour vous (ou pas), selon Tumblr tempérament.
Mise à jour Ok, donc après jmorts réponse ci-dessous comme proche de la lettre comme à 2h du matin le permet, je vous ai concocter le code suivant sans succès - il n'y a pas d'alerte à éclater. Myabe je suis un muppet, peut-être que je suis juste scheleeeepy mais si vous les jedi, les gens peuvent prendre un autre coup d'oeil j'avais vraiment l'apprécier 🙂
$('ul.right li').find('a').click(function() {
var postType = this.className;
var count = 0;
byCategory(postType);
return false;
function byCategory(postType, callback) {
$.getJSON('{URL}/api/read/json?type=' + postType + '&callback=?', function(data, textStatus, xhr) { //main callback function
if(xhr.status == 500 || xhr.status == 404 || xhr.status == 503) {
yourErrorHandler(data, textStatus, xhr); //success
} else {
yourCallbackToRunIfSuccessful(data); //failed
}
}
);
function yourCallbackToRunIfSuccessful(data) {
var article = [];
$.each(data.posts, function(i, item) {
//i = index
//item = data for a particular post
switch(item.type) {
case 'photo':
article[i] = '<div class="post_wrap"><div class="photo" style="padding-bottom:5px;">'
+ '<a href="' + item.url + '" title="{Title}" class="type_icon"><img src="http://static.tumblr.com/ewjv7ap/XSTldh6ds/photo_icon.png" alt="type_icon"/></a>'
+ '<a href="' + item.url + '" title="{Title}"><img src="'
+ item['photo-url-500']
+ '"alt="image" /></a></div></div>';
count = 1;
break;
case 'video':
article[i] = '<div class="post_wrap"><div class="video" style="padding-bottom:5px;">'
+ '<a href="' + item.url + '" title="{Title}" class="type_icon">'
+ '<img src="http://static.tumblr.com/ewjv7ap/nuSldhclv/video_icon.png" alt="type_icon"/></a>'
+ '<span style="margin: auto;">'
+ item['video-player']
+ '</span>'
+ '</div></div>';
count = 1;
break;
case 'audio':
if (use_IE == true) {
article[i] = '<div class="post_wrap"><div class="regular">'
+ '<a href="' + item.url + '" title="{Title}" class="type_icon"><img src="http://static.tumblr.com/ewjv7ap/R50ldh5uj/audio_icon.png" alt="type_icon"/></a>'
+ '<h3><a href="'
+ item.url
+ '">'
+ item['id3-artist']
+' - '
+ item['id3-title']
+ '</a></h3>'
+ '</div></div>';
} else {
article[i] = '<div class="post_wrap"><div class="regular">'
+ '<a href="' + item.url + '" title="{Title}" class="type_icon"><img src="http://static.tumblr.com/ewjv7ap/R50ldh5uj/audio_icon.png" alt="type_icon"/></a>'
+ '<h3><a href="'
+ item.url
+ '">'
+ item['id3-artist']
+' - '
+ item['id3-title']
+ '</a></h3><div class="player">'
+ item['audio-player']
+ '</div>'
+ '</div></div>';
};
count = 1;
break;
case 'regular':
article[i] = '<div class="post_wrap"><div class="regular">'
+ '<a href="' + item.url + '" title="{Title}" class="type_icon"><img src="http://static.tumblr.com/ewjv7ap/dwxldhck1/regular_icon.png" alt="type_icon"/></a><h3><a href="'
+ item.url
+ '">'
+ item['regular-title']
+ '</a></h3><div class="description_container">'
+ item['regular-body']
+ '</div></div></div>';
count = 1;
break;
case 'quote':
article[i] = '<div class="post_wrap"><div class="quote">'
+ '<a href="' + item.url + '" title="{Title}" class="type_icon"><img src="http://static.tumblr.com/ewjv7ap/loEldhcpr/quote_icon.png" alt="type_icon"/></a><blockquote><h3><a href="' + item.url + '" title="{Title}">'
+ item['quote-text']
+ '</a></h3></blockquote><cite>- '
+ item['quote-source']
+ '</cite></div></div>';
count = 1;
break;
case 'conversation':
article[i] = '<div class="post_wrap"><div class="chat">'
+ '<a href="' + item.url + '" title="{Title}" class="type_icon"><img src="http://static.tumblr.com/ewjv7ap/MVuldhcth/conversation_icon.png" alt="type_icon"/></a><h3><a href="'
+ item.url
+ '">'
+ item['conversation-title']
+ '</a></h3></div></div>';
count = 1;
break;
case 'link':
article[i] = '<div class="post_wrap"><div class="link">'
+ '<a href="' + item.url + '" title="{Title}" class="type_icon"><img src="http://static.tumblr.com/ewjv7ap/EQGldhc30/link_icon.png" alt="type_icon"/></a><h3><a href="'
+ item['link-url']
+ '" target="_blank">'
+ item['link-text']
+ '</a></h3></div></div>';
count = 1;
break;
default:
alert('No Entries Found.');
};
}) //end each
if (!(count == 0)) {
$('#content_right')
.hide('fast')
.html('<div class="first_div"><span class="left_corner"></span><span class="right_corner"></span><h2>Displaying '
+ postType
+ ' Posts Only</h2></div>'
+ article.join(''))
.slideDown('fast')
} else {
$('#content_right')
.hide('fast')
.html('<div class="first_div"><span class="left_corner"></span><span class="right_corner"></span><h2>Hmmm, currently there are no '
+ postType
+ ' posts to display</h2></div>')
.slideDown('fast')
}
//end getJSON
}; //end byCategory
function yourErrorHandler(data,textStatus,xhr) {
alert("Server returned status code " + xhr.status + ". Try again later.");
}
}
});
Notez que JSON est la notation des Objets JavaScript, pas un moyen de demander des données. Vous pouvez modifier votre question de parler d'AJAX au lieu de JSON JSON n'est pas important dans cette question.
Je pense que vous avez mal compris ce que JSON est. JSON est un format de représentation de données; vous êtes probablement référence à XmlHttpRequest (communément appelé "AJAX" pour une raison quelconque).
Machine - Bon point. JSON est juste un transport de données, comme le XML. Alors que l'AJAX est une technique pour récupérer des données à partir d'un serveur sans recharger la page, et peut renvoyer des données au format XML, JSON, HTML, texte brut, et d'autres formats, en dépit du fait que le " X "en AJAX signifie "XML".
Drôle. Trois commentaires expliquant les mêmes tous les différents utilisateurs qui disposent tous de la lettre T dans leurs noms.
La Machine Lol, même si la personne qui pose la question a un T en leur nom. Aller à la figure.
Je pense que vous avez mal compris ce que JSON est. JSON est un format de représentation de données; vous êtes probablement référence à XmlHttpRequest (communément appelé "AJAX" pour une raison quelconque).
Machine - Bon point. JSON est juste un transport de données, comme le XML. Alors que l'AJAX est une technique pour récupérer des données à partir d'un serveur sans recharger la page, et peut renvoyer des données au format XML, JSON, HTML, texte brut, et d'autres formats, en dépit du fait que le " X "en AJAX signifie "XML".
Drôle. Trois commentaires expliquant les mêmes tous les différents utilisateurs qui disposent tous de la lettre T dans leurs noms.
La Machine Lol, même si la personne qui pose la question a un T en leur nom. Aller à la figure.
OriginalL'auteur Tiny Giant Studios | 2011-01-07
Vous devez vous connecter pour publier un commentaire.
Votre rappel prend en fait 2 autres paramètres que vous n'êtes pas montrer:
Vous pouvez utiliser l'objet xhr pour vérifier l'état de la crue objet XMLHttpRequest. Si vous obtenez une erreur 404, 503, 500, etc ensuite, vous pouvez afficher votre message d'erreur ou d'exécuter une autre fonction.
http://api.jquery.com/jQuery.ajax
Aussi, si vous ne l'avez pas déjà Firebug pour Firefox, je recommande fortement pour débogage JavaScript: http://getfirebug.com/
Mise à JOUR:
La getJSON AJAX de JQuery wrapper ne dispose pas d'une erreur du gestionnaire de rappel. Au lieu de cela, vous aurez besoin pour l'utilisation de l'AJAX de JQuery gestionnaire pour faire de votre JSON demande:
Il est important de noter que ce n'est PAS JSONP. Cela signifie que vous ne peut pas faire de requêtes inter-domaine à l'aide de cette fonction.
Si vous êtes en s'appuyant sur JSONP à l'aide de mon réponse originale à cette question, alors vous aurez besoin de mettre en œuvre une solution où vous définissez un setInterval événement pour interroger une valeur qui sera changé dans votre fonction de rappel. Plus de détails peuvent être trouvés ici:
http://groups.google.com/group/jquery-dev/browse_thread/thread/73ca6be8071479fb
En fait, vous n'êtes pas loin. Vous devez prendre tout le code dans la fonction anonyme après cette ligne &callback=?', et le mettre dans une fonction appelée "yourCallbackToRunIfSuccessful". Puis remplacer l'original de votre rappel avec le mien, celui qui vérifie xhr.le statut pour voir ce que le code de réponse est. Je vais faire une autre clarifier les modifier.
S'il vous plaît laissez-nous savoir si cela fonctionne pour vous.
Hey jmort - vient de publier une mise à jour: peut-être que je suis un muppet, ou juste manqué un petit quelque chose, mais de toute façon il n'y a pas d'alerte pop-up ornant mes oreilles.
Qu'est-ce que le code d'erreur dans Firebug, Chrome Débogueur, ou de toute autre débogueur JavaScript que vous montrer le code de réponse renvoyé par votre appel AJAX qui représente l'état sur le serveur lorsque vous obtenez le message d'erreur? Je suppose 500, 503, 404, mais si c'est quelque chose de pas dans votre liste, vous devez l'ajouter à la liste de la OU des conditions.
OriginalL'auteur jmort253