Comment obtenir le code d'état de réponse de jQuery.ajax?

230

Dans le code suivant, tout ce que j'essaie de faire est d'obtenir le code de réponse HTTP à partir d'un appel jQuery.ajax. Ensuite, si le code est 301 (déplacé de façon permanente), affichez l'en-tête de réponse «Emplacement»:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title>jQuery 301 Trial</title>
  <script src="http://code.jquery.com/jquery-1.5.1.min.js"></script>

  <script type="text/javascript">
  function get_resp_status(url) {
    $.ajax({
      url: url,
      complete: function (jqxhr, txt_status) {
        console.log ("Complete: [ " + txt_status + " ] " + jqxhr);
        // if (response code is 301) {
        console.log ("Location: " + jqxhr.getResponseHeader("Location"));
        // }
      }
    });
  }
  </script>
  <script type="text/javascript">
  $(document).ready(function(){
    $('a').mouseenter(
      function () {
        get_resp_status(this.href);
      },
      function () {
      }
    );
  });
  </script>
</head>
<body>
  <a href="http://ow.ly/4etPl">Test 301 redirect</a>
  <a href="http://cnn.com/not_found">Test 404 not found</a>
</body>
</html>

Quelqu'un peut-il indiquer où je me trompe? Lorsque je vérifie l'objet 'jqxhr' dans Firebug, je ne trouve pas le code d'état, ni l'en-tête de réponse 'Location'. J'ai placé le point d'arrêt sur la dernière ligne de «complet».

Merci beaucoup.

Mahesh
la source
Je sais que c'est vieux, mais je pense que je l'ai résolu (XHR.responseURL): stackoverflow.com/a/39416846/4946681
Nate

Réponses:

221

Je vois le champ d'état sur l'objet jqXhr, voici un violon avec lequel cela fonctionne:

http://jsfiddle.net/magicaj/55HQq/3/

$.ajax({
    //...        
    success: function(data, textStatus, xhr) {
        console.log(xhr.status);
    },
    complete: function(xhr, textStatus) {
        console.log(xhr.status);
    } 
});
Adam Ayres
la source
2
Il semble fonctionner dans jsFiddle. Sur la base de cela et de la documentation jQuery, xhr.status devrait faire ce que je veux. Cependant, quand j'essaye la même chose dans mon code d'origine (txt_status remplacé par jqxhr.status), je continue à obtenir jqxhr.status de 0. Voici une capture d'écran: twitpic.com/4alsqj
Mahesh
10
Je crois que le problème est que vous ne courez pas contre un serveur Web mais localement à partir du système de fichiers. Je pense que si vous allumiez un serveur Web local, cela fonctionnerait correctement, voici quelques articles sur le sujet: pearweb.com/javascript/XMLHttpRequest.html developer.mozilla.org/En/Using_XMLHttpRequest "L'essentiel à noter ici est que l'état du résultat est comparé à 0 pour la réussite au lieu de 200. En effet, les schémas de fichiers et ftp n'utilisent pas de codes de résultat HTTP.
Adam Ayres
c'est bien. Surtout quand je peux demander à mon backend d'envoyer des codes d'état.
thatmiddleway
Notez que si la réponse est un statut de redirection comme 302, cela donnera 200
Accountant م
52

Je suis tombé sur ce vieux fil à la recherche d'une solution similaire moi-même et j'ai trouvé que la réponse acceptée était d'utiliser la .complete()méthode de jquery ajax. Je cite l'avis sur le site jquery ici:

Les rappels jqXHR.success (), jqXHR.error () et jqXHR.complete () sont obsolètes à partir de jQuery 1.8. Pour préparer votre code pour leur suppression éventuelle, utilisez plutôt jqXHR.done (), jqXHR.fail () et jqXHR.always () .

Pour connaître la status coderéponse ajax, on peut utiliser le code suivant:

$.ajax( url [, settings ] )
.always(function (jqXHR) {
    console.log(jqXHR.status);
});

Fonctionne de manière similaire pour .done()et.fail()

visage
la source
2
Cela revient "indéfini"
Pedro Joaquín
43

Il est probablement plus idiomatique jQuery d'utiliser la propriété statusCode de l'objet paramètre passé à la fonction $ .ajax:

$.ajax({
  statusCode: {
    500: function(xhr) {
      if(window.console) console.log(xhr.responseText);
    }
  }
});

Cependant, comme l'a dit Livingston Samuel , il n'est pas possible d'attraper 301 codes d'état en javascript.

rstackhouse
la source
41

Lorsque votre demande XHR renvoie une réponse de redirection (état HTTP 301, 302, 303, 307), le XMLHttpRequest suit automatiquement l'URL redirigée et renvoie le code d'état de cette URL .

Vous pouvez obtenir les codes d'état non redirigeant (200, 400, 500, etc.) via la statuspropriété de l'objet xhr.

Donc , vous ne pouvez pas obtenir l'emplacement redirigée de l' en- tête de réponse d'un 301, 302, 303ou 307demande.

Vous devrez peut-être modifier la logique de votre serveur pour répondre de manière à pouvoir gérer la redirection, plutôt que de laisser le navigateur le faire. Un exemple d'implémentation .

Livingston Samuel
la source
24

Vous pouvez vérifier le contenu de votre réponse, simplement console.log et vous verrez que la propriété a un code d'état. Si vous ne comprenez pas jsons, veuillez vous référer à la vidéo: https://www.youtube.com/watch?v=Bv_5Zv5c-Ts

Il explique les connaissances de base qui vous permettent de vous sentir plus à l'aise avec javascript.

Vous pouvez le faire avec une version plus courte de la demande ajax, veuillez voir le code ci-dessus:

$.get("example.url.com", function(data) {
                console.log(data);
            }).done(function() {
               // TO DO ON DONE
            }).fail(function(data, textStatus, xhr) {
                 //This shows status code eg. 403
                 console.log("error", data.status);
                 //This shows status message eg. Forbidden
                 console.log("STATUS: "+xhr);
            }).always(function() {
                 //TO-DO after fail/done request.
                 console.log("ended");
            });

Exemple de sortie de console:

error 403 
STATUS: Forbidden 
ended
Przemysław Sienkiewicz
la source
1
Merci d'avoir fourni le code complet de la façon d'utiliser done, fail et toujours, avec des paramètres de fonction complets.
IvanD
4

jqxhr est un objet json:

retours complets:
l'objet jqXHR (dans jQuery 1.4.x, XMLHTTPRequest) et une chaîne catégorisant le statut de la demande ("succès", "non modifié", "erreur", "délai d'attente", "abandon" ou "parsererror")) .

voir: jQuery ajax

vous feriez donc:

jqxhr.status pour obtenir le statut

Naftali aka Neal
la source
2

NB: Utilisation de jQuery 3.4.1

$.ajax({
  url: URL,
  success: function(data, textStatus, jqXHR){
    console.log(textStatus + ": " + jqXHR.status);
    // do something with data
  },
  error: function(jqXHR, textStatus, errorThrown){
    console.log(textStatus + ": " + jqXHR.status + " " + errorThrown);
  }
});
SurfSanta
la source