Fonction d'erreur jQuery ajax

130

J'ai un appel ajax qui transmet des données à une page qui renvoie ensuite une valeur.

J'ai récupéré l'appel réussi de la page mais je l'ai codé de sorte qu'il soulève une erreur dans l'asp. Comment récupérer cette erreur de la jquery?

Par exemple:

cache: false,
url: "addInterview_Code.asp",
type: "POST",
datatype: "text",
data: strData,
success: function (html) {
    alert('successful : ' + html);
    $("#result").html("Successful");
},
error: function (error) {
    **alert('error; ' + eval(error));**
}

C'est le bit d'erreur que je ne comprends pas. Dans la fonction, quel paramètre dois-je mettre pour que je puisse ensuite utiliser le message d'erreur que j'ai généré sur le serveur.

Darryl Wilson
la source
Il y a une faute de frappe ici: ce n'est dataTypepas le cas datatype.
Alejandro Nava
De plus, jQuery dit que vous ne pouvez pas utiliser à la fois le succès et l'erreur , comme vous l'avez fait.
Alejandro Nava
7
@ alej27: le libellé est un peu étrange, mais cela ne dit pas que vous ne pouvez pas les utiliser tous les deux, il dit qu'une requête n'appellera pas le succès et l'erreur (car ils s'excluent mutuellement).
Marty Vance
Soyez prudent avec les réponses ici À partir de jQuery 3.0, les obsolètes sont notés .erroret .successdeviennent plus importants car ils ont été supprimés.
Mark Schultheiss le

Réponses:

222

Les paramètres requis dans une errorfonction Ajax sont jqXHR, exceptionet vous pouvez l'utiliser comme ci-dessous:

$.ajax({
    url: 'some_unknown_page.html',
    success: function (response) {
        $('#post').html(response.responseText);
    },
    error: function (jqXHR, exception) {
        var msg = '';
        if (jqXHR.status === 0) {
            msg = 'Not connect.\n Verify Network.';
        } else if (jqXHR.status == 404) {
            msg = 'Requested page not found. [404]';
        } else if (jqXHR.status == 500) {
            msg = 'Internal Server Error [500].';
        } else if (exception === 'parsererror') {
            msg = 'Requested JSON parse failed.';
        } else if (exception === 'timeout') {
            msg = 'Time out error.';
        } else if (exception === 'abort') {
            msg = 'Ajax request aborted.';
        } else {
            msg = 'Uncaught Error.\n' + jqXHR.responseText;
        }
        $('#post').html(msg);
    },
});

DÉMO FIDDLE


Paramètres

jqXHR:

C'est en fait un objet d'erreur qui ressemble à ceci

Objet jqXHR d'erreur Ajax

Vous pouvez également afficher cela dans votre propre console de navigateur, en utilisant console.logà l'intérieur de la errorfonction comme:

error: function (jqXHR, exception) {
    console.log(jqXHR);
    // Your error handling logic here..
}

Nous utilisons la statuspropriété de cet objet pour obtenir le code d'erreur, comme si nous obtenons status = 404, cela signifie que la page demandée est introuvable. Cela n'existe pas du tout. Sur la base de ce code d'état, nous pouvons rediriger les utilisateurs vers la page de connexion ou tout ce que notre logique métier requiert.

exception:

Il s'agit d'une variable de chaîne qui montre le type d'exception. Donc, si nous obtenons une erreur 404, le exceptiontexte serait simplement une «erreur». De même, nous pourrions obtenir 'timeout', 'abort' comme d'autres textes d'exception.


Avis de dépréciation: lejqXHR.success() , jqXHR.error(), et jqXHR.complete()callbacks sont OBSOLETE jQuery 1.8. Pour préparer votre code pour leur suppression éventuelle, utiliser jqXHR.done(), jqXHR.fail()et à la jqXHR.always()place.

Donc, si vous utilisez jQuery 1.8 ou supérieur, nous devrons mettre à jour la logique de la fonction de succès et d'erreur comme: -

// Assign handlers immediately after making the request,
// and remember the jqXHR object for this request
var jqxhr = $.ajax("some_unknown_page.html")
    .done(function (response) {
        // success logic here
        $('#post').html(response.responseText);
    })
    .fail(function (jqXHR, exception) {
        // Our error logic here
        var msg = '';
        if (jqXHR.status === 0) {
            msg = 'Not connect.\n Verify Network.';
        } else if (jqXHR.status == 404) {
            msg = 'Requested page not found. [404]';
        } else if (jqXHR.status == 500) {
            msg = 'Internal Server Error [500].';
        } else if (exception === 'parsererror') {
            msg = 'Requested JSON parse failed.';
        } else if (exception === 'timeout') {
            msg = 'Time out error.';
        } else if (exception === 'abort') {
            msg = 'Ajax request aborted.';
        } else {
            msg = 'Uncaught Error.\n' + jqXHR.responseText;
        }
        $('#post').html(msg);
    })
    .always(function () {
        alert("complete");
    });

J'espère que ça aide!

palasн
la source
6
Fait intéressant, il n'est pas recommandé d'utiliser ajaxSetup. Voir api.jquery.com/jquery.ajaxsetup
SleepyBoBos
1
@ palaѕн Je pense que vous avez mal lu l'avis de désapprobation. Si vous remarquez, l'avis de dépréciation parle d'une dépréciation des méthodes de jqXHR, mais l'utilisation de success, error et complete dans votre exemple ci-dessus se fait dans un objet à la méthode $ .ajax. Cela n'est pas obsolète et vous n'avez pas besoin de changer votre code. Cependant, si vous préférez enchaîner les méthodes, vous pouvez utiliser ce style. Quand j'ai lu "dépréciation ...", cela m'a jeté (sans raison). :-)
bchr02
À partir de jQuery 3.0, les obsolètes sont notés .erroret .successdeviennent plus importants car ils ont été supprimés
Mark Schultheiss
99

Essaye ça:

error: function(jqXHR, textStatus, errorThrown) {
  console.log(textStatus, errorThrown);
}

Si vous souhaitez informer votre frontend d'une erreur de validation, essayez de renvoyer json:

dataType: 'json',
success: function(data, textStatus, jqXHR) {
   console.log(data.error);
}

Votre script asp devrait retourner:

{"error": true}
Czerasz
la source
1
À quoi servent textSttaus et errorThrown? Pouvez-vous s'il vous plaît expliquer
Annapurna
4

Voici comment retirer l'erreur asp.

              cache: false,
              url: "addInterview_Code.asp",
              type: "POST",
              datatype: "text",
              data: strData,
              success: function (html) {
                  alert('successful : ' + html);
                  $("#result").html("Successful");
              },
              error: function (jqXHR, textStatus, errorThrown) {
                  if (jqXHR.status == 500) {
                      alert('Internal error: ' + jqXHR.responseText);
                  } else {
                      alert('Unexpected error.');
                  }
              }
Riche C
la source
2
error(jqXHR, textStatus, errorThrown)

http://api.jquery.com/jQuery.ajax/

Praveen Prasad
la source
9
Veuillez fournir des explications, pas seulement un morceau de code et un lien vers la documentation.
Greg Dubicki
12
Merci pour presque rien.
judasane du
par exemple, vous auriez pu dire "OP utilise une erreur de fonction (erreur) mais jquery appelle une erreur de fonction (jqXHR, textStatus, errorThrown). Notez les 2 paramètres manquants dans l'extrait d'OP."
increddibelly le
2
          cache: false,
          url: "addInterview_Code.asp",
          type: "POST",
          datatype: "text",
          data: strData,
          success: function (html) {
              alert('successful : ' + html);
              $("#result").html("Successful");
          },
          error: function(data, errorThrown)
          {
              alert('request failed :'+errorThrown);
          }
sT0n3
la source
2

vous utilisez une fonction

error(error) 

mais jquery recherche en fait une fonction avec trois paramètres:

error(jqXHR, textStatus, errorThrown)

vous devrez ajouter deux paramètres supplémentaires.

AUSSI: veuillez jeter un œil à tous les commentaires ci-dessus qui mentionnent «obsolète» :)

$.ajax("www.stackoverflow.com/api/whatever", {
    dataType:"JSON"
    data: { id=1, name='example' }
}).succes(function (result) {
    // use result
}).error(function (jqXHR, textStatus, errorThrown) {
    // handle error
});
incrédule
la source
4
vous devrez ajouter deux paramètres supplémentaires - c'est tellement faux.
Développeur
1
hmm. si c'est tout ce que vous avez à dire - peut-être ne rien dire? ou, vous POUVEZ expliquer votre déclaration et réellement aider. Votre choix.
increddibelly le
1
En JavaScript, disons que vous avez une méthode - function myMethod (err) { alert(err); }puis appelez-la comme myMethod ("something is wrong", 500, some_object)- Cela fonctionnera sans aucun problème. Selon votre déclaration, cela ne fonctionnerait que si la signature de la méthode est function myMethod (err, status, some_object). Oubliez l'exemple ci-dessus, la signature de l' successévénement que vous avez dans la réponse est en fait .success(data, status, xhr), mais si vous avez juste besoin du résultat, nous le lions généralement .success (data)et les deux fonctionnent.
Développeur
Et quelle valeur ajoutée avez-vous apportée en ajoutant cette réponse? OMI il n'y a aucune information dans votre réponse qui manquait dans les réponses précédentes. La seule chose que vous avez faite a été de remonter cette question dans la pile.
Développeur
0

De jquery.com:

The jqXHR.success(), jqXHR.error(), and jqXHR.complete()
callback methods introduced injQuery 1.5 are deprecated
as of jQuery 1.8. To prepare your code for their eventual 
removal, use jqXHR.done(), jqXHR.fail(), and jqXHR.always() instead.

Si vous voulez des gestionnaires globaux, vous pouvez utiliser:

.ajaxStart(), .ajaxStop(),
.ajaxComplete(), .ajaxError(),
.ajaxSuccess(), .ajaxSend()
John Kloian
la source