web-dev-qa-db-de.com

jQuery Ajax-Fehlerbehandlung, zeigt benutzerdefinierte Ausnahmemeldungen an

Gibt es eine Möglichkeit, benutzerdefinierte Ausnahmemeldungen als Warnung in meiner jQuery-Fehlermeldung AJAX anzuzeigen?

Wenn ich zum Beispiel über Struts by throw new ApplicationException("User name already exists"); eine Ausnahmebedingung auf dem Server auslösen möchte, möchte ich diese Meldung ("Benutzername ist bereits vorhanden") in der jQuery AJAX - Fehlermeldung abfangen.

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

Beim zweiten Alarm, bei dem ich den ausgelösten Fehler meldet, erhalte ich undefined und der Statuscode ist 500.

Ich bin mir nicht sicher, wo ich falsch liege. Was kann ich tun, um dieses Problem zu beheben?

jqueryajaxcustom-exceptions
663

Stellen Sie sicher, dass Sie für Response.StatusCode einen anderen Wert als 200 eingestellt haben. Schreiben Sie die Nachricht Ihrer Ausnahme mit Response.Write und verwenden Sie dann ...

xhr.responseText

..im Javascript.

328
Sprintstar

Controller: 

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

Skript anzeigen: 

$.ajax({
    type: "post", url: "/SomeController/SomeAction",
    success: function (data, text) {
        //...
    },
    error: function (request, status, error) {
        alert(request.responseText);
    }
});
201
AlexMAS

ServerSide:  

     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

           }
 }

ClientSide: 

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

Generische Ajax-Fehlerbehandlung

Wenn ich eine generische Fehlerbehandlung für alle Ajax-Anforderungen durchführen muss. Ich werde den ajaxError-Handler festlegen und den Fehler in einem div namens errorcontainer oben in HTML-Inhalt anzeigen.

$("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);
                 });
95
Sanjeev Kumar Dangi

Sie müssen die responseText in JSON konvertieren. JQuery verwenden:

jsonValue = jQuery.parseJSON( jqXHR.responseText );
console.log(jsonValue.Message);
78
Sydney

Wenn Sie asp.net anrufen, wird der Titel der Fehlermeldung zurückgegeben:

Ich habe nicht alle formatErrorMessage selbst geschrieben, aber ich finde es sehr nützlich.

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) ); 
})
36
Sam Jones

Dies ist was ich getan habe und es funktioniert bisher in einer MVC 5-Anwendung. 

Der Rückgabetyp des Controllers ist ContentResult.

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

Und auf Kundenseite sieht die Ajax-Funktion so aus

$.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
Cengiz Araz

Wenn jemand wie 2016 für die Antwort hier ist, verwenden Sie .fail() für die Fehlerbehandlung, da .error() ab jQuery 3.0 veraltet ist

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

Ich hoffe, es hilft

15
Learner

Eine allgemeine/wiederverwendbare Lösung

Diese Antwort dient als zukünftige Referenz für alle, die auf dieses Problem stoßen. Die Lösung besteht aus zwei Dingen:

  1. Benutzerdefinierte AusnahmeModelStateException, die ausgelöst wird, wenn die Validierung auf dem Server fehlschlägt (Modellstatus meldet Validierungsfehler, wenn Datenanmerkungen verwendet werden und starke Controller-Aktionsparameter verwendet werden.)
  2. Benutzerdefinierter Controller-AktionsfehlerfilterHandleModelStateExceptionAttribute, der eine benutzerdefinierte Ausnahme abfängt und den HTTP-Fehlerstatus mit Modellstatusfehler im Hauptteil zurückgibt

Dies bietet die optimale Infrastruktur für jQuery-Ajax-Aufrufe, um ihr volles Potenzial mit success- und error-Handlern zu nutzen.

Kundenseitiger Code

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

Serverseitiger Code

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

    // create new user because validation was successful
}

Das gesamte Problem ist in diesem Blog-Beitrag beschrieben, wo Sie den gesamten Code finden, um dies in Ihrer Anwendung auszuführen.

14
Robert Koritnik

Ich fand das schön, weil ich die Nachricht, die ich vom Server sendete, herausfinden und dem Benutzer eine freundliche Nachricht ohne Stacktrace anzeigen konnte ...

error: function (response) {
      var r = jQuery.parseJSON(response.responseText);
      alert("Message: " + r.Message);
      alert("StackTrace: " + r.StackTrace);
      alert("ExceptionType: " + r.ExceptionType);
}
14
crazyDiamond

Dies wird wahrscheinlich durch die JSON-Feldnamen verursacht, die keine Anführungszeichen enthalten.

Ändern Sie die JSON-Struktur von:

{welcome:"Welcome"}

zu:

{"welcome":"Welcome"}
7
Guy

jQuery.parseJSON ist nützlich für Erfolg und Fehler.

$.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
Nuri YILMAZ

Ich glaube, der Ajax-Response-Handler verwendet den HTTP-Statuscode, um zu überprüfen, ob ein Fehler aufgetreten ist.

Wenn Sie also einfach eine Java-Ausnahme im serverseitigen Code auslösen, die HTTP-Antwort jedoch keinen jQuery-Statuscode 500 (oder in diesem Fall wahrscheinlich das Objekt XMLHttpRequest ) hat, wird davon ausgegangen, dass alles in Ordnung war.

Ich sage das, weil ich in ASP.NET ein ähnliches Problem hatte, bei dem ich etwas wie eine ArgumentException ("Ich weiß nicht, was zu tun ist ...") warf, aber der Fehlerhandler nicht ausgelöst wurde.

Dann setze ich den Response.StatusCode entweder auf 500 oder 200, ob ich einen Fehler hatte oder nicht.

5
Vitor Silva

Sie haben ein JSON-Objekt der Ausnahme im xhr-Objekt. Benutz einfach

alert(xhr.responseJSON.Message);

Das JSON-Objekt macht zwei weitere Eigenschaften verfügbar: 'ExceptionType' und 'StackTrace'

5
Edika

 error:function (xhr, ajaxOptions, thrownError) {
        alert(xhr.status);
        alert(thrownError);
      }
im Codefehler ajax request for catch error Verbindung zwischen Client und Server wenn Sie die Fehlermeldung Ihrer Anwendung im Erfolgsbereich anzeigen möchten 

sowie 

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

}

5
Wara Haii
$("#save").click(function(){
    $("#save").ajaxError(function(event,xhr,settings,error){
        $(this).html{'error: ' (xhr ?xhr.status : '')+ ' ' + (error ? error:'unknown') + 'page: '+settings.url);
    });
});
4
ibrahim ozboluk

Wirft eine neue Ausnahme auf den Server mit:

Response.StatusCode = 500

Response.StatusDescription = ex.Message ()

Ich glaube, dass die StatusDescription an den Ajax-Aufruf zurückgegeben wird ...

Beispiel:

        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
Steffan

Obwohl diese Frage seit vielen Jahren gestellt wurde, finde ich immer noch nicht xhr.responseText als Antwort, die ich gesucht habe. Es hat mir eine Zeichenfolge im folgenden Format zurückgegeben:

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

was ich definitiv nicht den Benutzern zeigen möchte. Was ich gesucht habe, ist etwa wie folgt:

alert(xhr.responseJSON.message);

xhr.responseJSON.message gibt mir die genaue Nachricht aus dem Json-Objekt, die den Benutzern angezeigt werden kann.

2
Saket
$("#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
    });
});

Wenn es ein Formular gibt wird es mit validate übermittelt

verwenden Sie einfach den Rest des Codes

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

... ... });

1
Monzur

Diese Funktion generiert im Wesentlichen eindeutige zufällige API-Schlüssel. Falls dies nicht der Fall ist, wird ein Popup-Dialogfeld mit einer Fehlermeldung angezeigt.

In Ansichtsseite: 

<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>

Vom Controller: 

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

Der optionale Parameter callback gibt eine Callback-Funktion an, die ausgeführt werden soll, wenn die load () - Methode abgeschlossen ist. Die Rückruffunktion kann verschiedene Parameter haben:

Typ: Funktion (jqXHR jqXHR, String textStatus, String errorThrown)

Eine Funktion, die aufgerufen werden soll, wenn die Anforderung fehlschlägt. Die Funktion empfängt drei Argumente: Das Objekt jqXHR (in jQuery 1.4.x, XMLHttpRequest), eine Zeichenfolge, die den aufgetretenen Fehlertyp beschreibt, und ein optionales Ausnahmeobjekt, sofern vorhanden. Mögliche Werte für das zweite Argument (außer null) sind "Timeout", "Fehler", "Abbruch" und "Parsererror". Wenn ein HTTP-Fehler auftritt, erhält errorThrown den Textteil des HTTP-Status, z. B. "Nicht gefunden" oder "Interner Serverfehler". Ab jQuery 1.5 kann die Fehlereinstellung ein Array von Funktionen akzeptieren. Jede Funktion wird nacheinander aufgerufen. Anmerkung: Dieser Handler wird nicht für domänenübergreifende Skript- und domänenübergreifende JSONP-Anforderungen aufgerufen. 

0
Nishanth ॐ

Zuerst müssen wir <serviceDebug includeExceptionDetailInFaults = "True" /> in web.config setzen:

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

Zusätzlich zu jQuery auf der Jquery-Ebene müssen Sie eine Fehlerantwort analysieren, die Ausnahmen wie folgt enthält:

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

Dann können Sie mit r.Message den Ausnahmetext anzeigen.

Überprüfen Sie den vollständigen Code: http://www.codegateway.com/2012/04/jquery-ajax-handle-exception-thrown-by.html

0
Avinash