jQuery gestion des erreurs Ajax, afficher les messages d'exception personnalisés

y a-t-il un moyen pour que je puisse afficher des messages d'exception personnalisés comme une alerte dans mon message D'erreur jQuery AJAX?

par exemple, si je veux lancer une exception du côté du serveur via Struts par throw new ApplicationException("User name already exists"); , je veux enregistrer ce message ('user name already exists') dans le message D'erreur jQuery AJAX.

jQuery("#save").click(function () {
  if (jQuery('#form').jVal()) {
    jQuery.ajax({
      type: "POST",
      url: "saveuser.do",
      dataType: "html",
      data: "userId=" + encodeURIComponent(trim(document.forms[0].userId.value)),
      success: function (response) {
        jQuery("#usergrid").trigger("reloadGrid");
        clear();
        alert("Details saved successfully!!!");
      },
      error: function (xhr, ajaxOptions, thrownError) {
        alert(xhr.status);
        alert(thrownError);
      }
    });
  }
});

sur la deuxième alerte, où j'alerte l'erreur lancée, je reçois undefined et le code d'état est 500.

Je ne sais pas où je vais mal. Que puis-je faire pour régler ce problème?

654
demandé sur Roman C 2008-12-18 15:06:18
la source

20 ответов

mettez Response.StatusCode sur quelque chose d'autre que 200. Écrivez le message de votre exception en utilisant Response.Write , puis utilisez...

xhr.responseText

.. dans votre javascript.

325
répondu Sprintstar 2009-01-16 17:25:15
la source

contrôleur:

public class ClientErrorHandler : FilterAttribute, IExceptionFilter
{
    public void OnException(ExceptionContext filterContext)
    {
        var response = filterContext.RequestContext.HttpContext.Response;
        response.Write(filterContext.Exception.Message);
        response.ContentType = MediaTypeNames.Text.Plain;
        filterContext.ExceptionHandled = true;
    }
}

[ClientErrorHandler]
public class SomeController : Controller
{
    [HttpPost]
    public ActionResult SomeAction()
    {
        throw new Exception("Error message");
    }
}

Afficher le script:

$.ajax({
    type: "post", url: "/SomeController/SomeAction",
    success: function (data, text) {
        //...
    },
    error: function (request, status, error) {
        alert(request.responseText);
    }
});
196
répondu AlexMAS 2011-12-21 03:30:41
la source

server-side:

     doPost(HttpServletRequest request, HttpServletResponse response){ 
            try{ //logic
            }catch(ApplicationException exception){ 
               response.setStatus(400);
               response.getWriter().write(exception.getMessage());
               //just added semicolon to end of line

           }
 }

Client:

 jQuery.ajax({// just showing error property
           error: function(jqXHR,error, errorThrown) {  
               if(jqXHR.status&&jqXHR.status==400){
                    alert(jqXHR.responseText); 
               }else{
                   alert("Something went wrong");
               }
          }
    }); 

Générique Ajax Erreur De Manipulation

si j'ai besoin de faire un traitement d'erreur générique pour toutes les requêtes ajax. Je vais configurer le gestionnaire ajaxError et afficher l'erreur sur un div nommé errorcontainer sur le dessus du contenu html.

$("div#errorcontainer")
    .ajaxError(
        function(e, x, settings, exception) {
            var message;
            var statusErrorMap = {
                '400' : "Server understood the request, but request content was invalid.",
                '401' : "Unauthorized access.",
                '403' : "Forbidden resource can't be accessed.",
                '500' : "Internal server error.",
                '503' : "Service unavailable."
            };
            if (x.status) {
                message =statusErrorMap[x.status];
                                if(!message){
                                      message="Unknown Error \n.";
                                  }
            }else if(exception=='parsererror'){
                message="Error.\nParsing JSON Request failed.";
            }else if(exception=='timeout'){
                message="Request Time out.";
            }else if(exception=='abort'){
                message="Request was aborted by the server";
            }else {
                message="Unknown Error \n.";
            }
            $(this).css("display","inline");
            $(this).html(message);
                 });
92
répondu Sanjeev Kumar Dangi 2015-01-02 18:37:51
la source

vous devez convertir le responseText en JSON. En Utilisant JQuery:

jsonValue = jQuery.parseJSON( jqXHR.responseText );
console.log(jsonValue.Message);
73
répondu Sydney 2014-08-09 01:26:23
la source

si vous faites un appel à asp.net, ceci retournera le titre du message d'erreur:

Je n'ai pas écrit tout de formatErrorMessage moi-même, mais je le trouve très utile.

function formatErrorMessage(jqXHR, exception) {

    if (jqXHR.status === 0) {
        return ('Not connected.\nPlease verify your network connection.');
    } else if (jqXHR.status == 404) {
        return ('The requested page not found. [404]');
    } else if (jqXHR.status == 500) {
        return ('Internal Server Error [500].');
    } else if (exception === 'parsererror') {
        return ('Requested JSON parse failed.');
    } else if (exception === 'timeout') {
        return ('Time out error.');
    } else if (exception === 'abort') {
        return ('Ajax request aborted.');
    } else {
        return ('Uncaught Error.\n' + jqXHR.responseText);
    }
}


var jqxhr = $.post(addresshere, function() {
  alert("success");
})
.done(function() { alert("second success"); })
.fail(function(xhr, err) { 

    var responseTitle= $(xhr.responseText).filter('title').get(0);
    alert($(responseTitle).text() + "\n" + formatErrorMessage(xhr, err) ); 
})
34
répondu Sam Jones 2013-02-13 16:30:12
la source

C'est ce que j'ai fait et cela fonctionne jusqu'à présent dans une application MVC 5.

Le type de retour du contrôleur

est satisfaisant.

public ContentResult DoSomething()
{
    if(somethingIsTrue)
    {
        Response.StatusCode = 500 //Anything other than 2XX HTTP status codes should work
        Response.Write("My Message");
        return new ContentResult();
    }

    //Do something in here//
    string json = "whatever json goes here";

    return new ContentResult{Content = json, ContentType = "application/json"};
}

et du côté client, c'est à quoi ressemble la fonction ajax

$.ajax({
    type: "POST",
    url: URL,
    data: DATA,
    dataType: "json",
    success: function (json) {
        //Do something with the returned json object.
    },
    error: function (xhr, status, errorThrown) {
        //Here the status code can be retrieved like;
        xhr.status;

        //The message added to Response object in Controller can be retrieved as following.
        xhr.responseText;
    }
});
20
répondu Cengiz Araz 2016-12-27 08:45:05
la source

si quelqu'un est ici comme en 2016 pour la réponse, utiliser .fail() pour le traitement des erreurs comme .error() est déprécié à partir de jQuery 3.0

$.ajax( "example.php" )
  .done(function() {
    alert( "success" );
  })
  .fail(function(jqXHR, textStatus, errorThrown) {
    //handle error here
  })

j'espère que cela aide

16
répondu Learner 2016-12-13 20:41:33
la source

une solution générale / réutilisable

Cette réponse est fournie pour référence future à tous ceux qui bosse dans ce problème. La Solution consiste en deux choses:

  1. "exception personnalisée ModelStateException qui est rejeté lorsque la validation échoue sur le serveur (l'état du modèle signale des erreurs de validation lorsque nous utilisons des annotations de données et que nous utilisons des paramètres d'action de contrôleur fortement dactylographiés)
  2. Custom action du contrôleur erreur de filtre HandleModelStateExceptionAttribute que les captures d'exception personnalisée et renvoie HTTP statut de l'erreur avec le modèle de l'état d'erreur dans le corps

cela fournit l'infrastructure optimale pour les appels Ajax jQuery pour utiliser leur plein potentiel avec les handlers success et error .

code côté Client

$.ajax({
    type: "POST",
    url: "some/url",
    success: function(data, status, xhr) {
        // handle success
    },
    error: function(xhr, status, error) {
        // handle error
    }
});

code Côté Serveur

[HandleModelStateException]
public ActionResult Create(User user)
{
    if (!this.ModelState.IsValid)
    {
        throw new ModelStateException(this.ModelState);
    }

    // create new user because validation was successful
}

L'ensemble du problème est détaillé dans ce billet de blog où vous pouvez trouver tout le code pour exécuter ceci dans votre application.

14
répondu Robert Koritnik 2011-05-05 12:27:10
la source

j'ai trouvé cela agréable parce que je pouvais analyser le message que j'envoyais du serveur et afficher un message amical à l'utilisateur sans le stacktrace...

error: function (response) {
      var r = jQuery.parseJSON(response.responseText);
      alert("Message: " + r.Message);
      alert("StackTrace: " + r.StackTrace);
      alert("ExceptionType: " + r.ExceptionType);
}
14
répondu crazyDiamond 2011-12-02 01:33:03
la source

cela est probablement dû au fait que les noms des champs JSON n'ont pas de guillemets.

modifier la structure JSON de:

{welcome:"Welcome"}

à:

{"welcome":"Welcome"}
7
répondu Guy 2011-05-27 00:45:21
la source

je crois que le gestionnaire de réponse Ajax utilise le code de statut HTTP pour vérifier s'il y avait une erreur.

donc si vous lancez juste une exception Java sur votre code côté serveur, mais que la réponse HTTP n'a pas de code d'État 500 jQuery (ou dans ce cas probablement l'objet XMLHttpRequest ) supposera que tout allait bien.

je dis cela parce que j'ai eu un problème similaire en ASP.NET où je lançais quelque chose comme un ArgumentException("je Ne sais pas quoi faire...") mais le gestionnaire d'erreurs ne tirait pas.

j'ai ensuite placé le Response.StatusCode à 500 ou 200 que j'ai eu une erreur ou non.

5
répondu Vitor Silva 2010-08-07 03:09:09
la source

jQuery.parseJSON est utile pour le succès et l'erreur.

$.ajax({
    url: "controller/action",
    type: 'POST',
    success: function (data, textStatus, jqXHR) {
        var obj = jQuery.parseJSON(jqXHR.responseText);
        notify(data.toString());
        notify(textStatus.toString());
    },
    error: function (data, textStatus, jqXHR) { notify(textStatus); }
});
5
répondu Nuri YILMAZ 2011-08-12 02:18:36
la source
$("#save").click(function(){
    $("#save").ajaxError(function(event,xhr,settings,error){
        $(this).html{'error: ' (xhr ?xhr.status : '')+ ' ' + (error ? error:'unknown') + 'page: '+settings.url);
    });
});
4
répondu ibrahim ozboluk 2014-03-06 22:25:52
la source

vous avez un objet JSON de l'exception jeté, dans l'objet xhr. Il suffit d'utiliser

alert(xhr.responseJSON.Message);

l'objet JSON expose deux autres propriétés: 'ExceptionType ' et' StackTrace '

4
répondu Edika 2017-02-23 13:33:39
la source

 error:function (xhr, ajaxOptions, thrownError) {
        alert(xhr.status);
        alert(thrownError);
      }
dans l'erreur de code ajax demande pour l'erreur de capture se connecter entre le client et le serveur si vous voulez afficher le message d'erreur de votre application envoyer dans la portée de succès

tel que

success: function(data){
   //   data is object  send  form server 
   //   property of data 
   //   status  type boolean 
   //   msg     type string
   //   result  type string
  if(data.status){ // true  not error 
         $('#api_text').val(data.result);
  }
  else 
  {
      $('#error_text').val(data.msg);
  }

}
4
répondu Wara Haii 2018-03-16 06:33:42
la source

lancer une nouvelle exception sur le serveur en utilisant:

réponse.StatusCode = 500

réponse.StatusDescription = ex.Message ()

je crois que la description de statut est retournée à L'appel Ajax...

exemple:

        Try

            Dim file As String = Request.QueryString("file")

            If String.IsNullOrEmpty(file) Then Throw New Exception("File does not exist")

            Dim sTmpFolder As String = "Temp\" & Session.SessionID.ToString()

            sTmpFolder = IO.Path.Combine(Request.PhysicalApplicationPath(), sTmpFolder)

            file = IO.Path.Combine(sTmpFolder, file)

            If IO.File.Exists(file) Then

                IO.File.Delete(file)

            End If

        Catch ex As Exception

            Response.StatusCode = 500

            Response.StatusDescription = ex.Message()

        End Try
3
répondu Steffan 2011-03-16 07:44:27
la source

bien que cette question ait été posée il y a de nombreuses années, je ne trouve toujours pas xhr.responseText comme la réponse que je cherchais. Il m'a renvoyé la chaîne dans le format suivant:

"{"error":true,"message":"The user name or password is incorrect"}"

que je ne veux absolument pas montrer aux utilisateurs. Ce que je cherchais est quelque chose comme ci-dessous:

alert(xhr.responseJSON.message);

xhr.responseJSON.message me donne le message exact de L'objet Json qui peut être montré aux utilisateurs.

2
répondu Saket 2016-06-24 05:05:45
la source
$("#fmlogin").submit(function(){
   $("#fmlogin").ajaxError(function(event,xhr,settings,error){
       $("#loading").fadeOut('fast');       
       $("#showdata").fadeIn('slow');   
       $("#showdata").html('Error please, try again later or reload the Page. Reason: ' + xhr.status);
       setTimeout(function() {$("#showdata").fadeOut({"opacity":"0"})} , 5500 + 1000); // delays 1 sec after the previous one
    });
});

S'il y a un formulaire est soumis avec validate

utilisez simplement le reste du code

$("#fmlogin").validate({...

... ... });

1
répondu Monzur 2014-03-09 21:31:42
la source

tout d'abord, nous devons définir dans web.config:

<serviceBehaviors> 
 <behavior name=""> 
  <serviceMetadata httpGetEnabled="true" /> 
    **<serviceDebug includeExceptionDetailInFaults="true" />** 
 </behavior> 
</serviceBehaviors>

en plus de celui au niveau jquery dans la partie erreur, vous devez analyser la réponse d'erreur qui contient l'exception comme:

.error(function (response, q, t) { 
  var r = jQuery.parseJSON(response.responseText); 
}); 

alors en utilisant R. Message vous pouvez actully afficher le texte d'exception.

Vérifier le code complet: http://www.codegateway.com/2012/04/jquery-ajax-handle-exception-thrown-by.html

0
répondu Avinash 2012-05-09 12:41:26
la source

cette fonction génère essentiellement des clés D'API aléatoires uniques et dans le cas où il ne le fait pas alors pop-up boîte de dialogue avec message d'erreur apparaît

Dans La Page D'Affichage De:

<div class="form-group required">
    <label class="col-sm-2 control-label" for="input-storename"><?php echo $entry_storename; ?></label>
    <div class="col-sm-6">
        <input type="text" class="apivalue"  id="api_text" readonly name="API" value="<?php echo strtoupper(substr(md5(rand().microtime()), 0, 12)); ?>" class="form-control" />                                                                    
        <button type="button" class="changeKey1" value="Refresh">Re-Generate</button>
    </div>
</div>

<script>
$(document).ready(function(){
    $('.changeKey1').click(function(){
          debugger;
        $.ajax({
                url  :"index.php?route=account/apiaccess/regenerate",
                type :'POST',
                dataType: "json",
                async:false,
                contentType: "application/json; charset=utf-8",
                success: function(data){
                  var result =  data.sync_id.toUpperCase();
                        if(result){
                          $('#api_text').val(result);
                        }
                  debugger;
                  },
                error: function(xhr, ajaxOptions, thrownError) {
                  alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
                }

        });
    });
  });
</script>

De La Part Du Contrôleur:

public function regenerate(){
    $json = array();
    $api_key = substr(md5(rand(0,100).microtime()), 0, 12);
    $json['sync_id'] = $api_key; 
    $json['message'] = 'Successfully API Generated';
    $this->response->addHeader('Content-Type: application/json');
    $this->response->setOutput(json_encode($json));
}

le paramètre de callback optionnel spécifie une fonction de callback à exécuter lorsque la méthode load() est compléter. La fonction callback peut avoir différents paramètres:

Type: Function (jqXHR jqXHR, String textStatus, String errorThrown )

fonction à appeler en cas d'échec de la requête. La fonction reçoit trois arguments: le jqXHR (dans jQuery 1.4.x, XMLHttpRequest), une chaîne de caractères décrivant le type d'erreur qui s'est produite et un objet d'exception optionnel, si un tel objet s'est produit. Les valeurs possibles pour le le second argument (en plus de null) est "timeout", "error", "abort", et "parsererror". Lorsqu'une erreur HTTP se produit, errorThrown reçoit la partie textuelle de L'état HTTP, telle que "Not Found" ou "Internal Server Error."À partir de jQuery 1.5, le réglage d'erreur peut accepter un tableau de fonctions. Chaque fonction sera appelée à son tour. Note: Ce gestionnaire n'est pas requis pour les requêtes JSONP et script de cross-domaine.

0
répondu Nishanth ॐ 2018-02-22 10:58:25
la source

Autres questions sur jquery ajax custom-exceptions