jQuery Ajax 오류 처리, 사용자 정의 예외 메시지 표시

jQuery AJAX 오류 메시지에 사용자 정의 예외 메시지를 경고로 표시 할 수있는 방법이 있습니까?

예를 들어 Struts by 를 통해 서버 측에서 예외를 throw throw new ApplicationException("User name already exists");하려면 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);
      }
    });
  }
});

두 번째 경고에서 발생한 오류를 경고하는 메시지가 표시 undefined되며 상태 코드는 500입니다.

내가 어디로 잘못 가고 있는지 잘 모르겠습니다. 이 문제를 해결하려면 어떻게해야합니까?

Response.StatusCode200이 아닌 다른 값으로 설정했는지 확인하십시오.를 사용하여 예외 메시지를 작성한 Response.Write후 다음을 사용하십시오.

xhr.responseText

.. 당신의 자바 스크립트에서.

제어 장치:

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

스크립트보기 :

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

서버 측:

     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

           }
 }

고객 입장에서:

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

일반 Ajax 오류 처리

모든 아약스 요청에 대해 일반적인 오류 처리가 필요한 경우. ajaxError 핸들러를 설정하고 html 컨텐츠 맨 위에 errorcontainer라는 div에 오류를 표시합니다.

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

responseText를 JSON 으로 변환해야합니다 . JQuery 사용하기 :

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

asp.net을 호출하면 오류 메시지 제목이 반환됩니다.

formatErrorMessage를 직접 작성하지는 않았지만 매우 유용합니다.

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

이것이 내가 한 일이며 지금까지 MVC 5 응용 프로그램에서 작동합니다.

컨트롤러의 반환 유형은 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"};
}

그리고 클라이언트 쪽에서 이것은 아약스 기능이 어떻게 생겼는지입니다.

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

답을 위해 2016 년에 누군가가 여기에 있다면 jQuery 3.0에서 사용되지 않는 .fail()오류 처리 .error()에 사용하십시오

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

나는 그것이 도움이되기를 바랍니다

일반적인 / 재사용 가능한 솔루션

이 답변은이 문제에 부딪힌 모든 사람들에 대한 향후 참조를 위해 제공됩니다. 솔루션은 두 가지로 구성됩니다.

1. ModelStateException서버에서 유효성 검사가 실패 할 때 발생 하는 사용자 지정 예외 (데이터 주석을 사용하고 강력한 형식의 컨트롤러 작업 매개 변수를 사용할 때 모델 상태에서 유효성 검사 오류가보고 됨)
2. 사용자 HandleModelStateExceptionAttribute 지정 예외를 잡아 본문에서 모델 상태 오류와 함께 HTTP 오류 상태를 반환하는 사용자 지정 컨트롤러 작업 오류 필터

jQuery를 아약스가 자신의 잠재력을 사용하는 호출이 최적의 인프라를 제공 success하고 error핸들러.

클라이언트 측 코드

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

서버 측 코드

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

    // create new user because validation was successful
}

전체 문제는 이 블로그 게시물에 자세히 설명되어 있으며 애플리케이션에서이를 실행하기위한 모든 코드를 찾을 수 있습니다.

서버에서 보낸 메시지를 파싱하고 스택 추적없이 사용자에게 친숙한 메시지를 표시 할 수 있기 때문에 이것이 좋았습니다.

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

 error:function (xhr, ajaxOptions, thrownError) {
        alert(xhr.status);
        alert(thrownError);
      }

와 같은

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

}

JSON 필드 이름에 따옴표가없는 경우 일 수 있습니다.

다음에서 JSON 구조를 변경하십시오.

{welcome:"Welcome"}

에:

{"welcome":"Welcome"}

Ajax 응답 핸들러는 HTTP 상태 코드를 사용하여 오류가 있는지 확인합니다.

따라서 서버 측 코드에서 Java 예외를 던지지 만 HTTP 응답에 500 개의 상태 코드 jQuery (또는이 경우 XMLHttpRequest 객체)가 없으면 모든 것이 잘되었다고 가정합니다.

ASP.NET에서 비슷한 문제가있어 ArgumentException ( "Do n't know to do ...")과 같은 문제가 발생했지만 오류 처리기가 실행되지 않았기 때문에 이것을 말하고 있습니다.

그런 다음 Response.StatusCode오류가 있는지 여부에 관계없이 500 또는 200으로 설정했습니다 .

jQuery.parseJSON은 성공과 오류에 유용합니다.

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

xhr 객체에 예외의 JSON 객체가 있습니다. 그냥 사용

alert(xhr.responseJSON.Message);

JSON 객체는 'ExceptionType'과 'StackTrace'의 두 가지 다른 속성을 노출합니다.

이 함수는 기본적으로 고유 한 임의 API 키를 생성하며 그렇지 않은 경우 오류 메시지가 표시된 팝업 대화 상자가 나타납니다

보기 페이지에서 :

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

컨트롤러에서 :

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

선택적 콜백 매개 변수는 load () 메소드가 완료 될 때 실행할 콜백 함수를 지정합니다. 콜백 함수는 다른 매개 변수를 가질 수 있습니다.

유형 : 기능 (jqXHR jqXHR, 문자열 textStatus, 문자열 errorThrown)

요청이 실패하면 호출 할 함수입니다. 이 함수는 jqXHR (jQuery 1.4.x, XMLHttpRequest) 오브젝트, 발생한 오류 유형을 설명하는 문자열 및 발생하는 경우 선택적 예외 오브젝트를 수신합니다. 두 번째 인수 (널 제외)에 가능한 값은 "timeout", "error", "abort"및 "parsererror"입니다. HTTP 오류가 발생하면 errorThrown은 "Not Found"또는 "Internal Server Error"와 같은 HTTP 상태의 텍스트 부분을 수신합니다. jQuery 1.5부터는 오류 설정에 여러 함수를 사용할 수 있습니다. 각 기능이 차례로 호출됩니다. 참고 :이 핸들러는 도메인 간 스크립트 및 도메인 간 JSONP 요청에 대해 호출되지 않습니다.

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

다음을 사용하여 서버에서 새 예외를 처리하십시오.

Response.StatusCode = 500

Response.StatusDescription = ex.Message ()

StatusDescription이 Ajax 호출로 반환된다고 생각합니다 ...

예:

        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

이 질문을 한 지 몇 년이 지났지 만 여전히 xhr.responseText내가 찾던 답을 찾지 못했습니다 . 다음 형식으로 문자열을 반환했습니다.

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

확실히 사용자에게 보여주고 싶지 않습니다. 내가 찾던 것은 다음과 같습니다.

alert(xhr.responseJSON.message);

xhr.responseJSON.message Json Object의 정확한 메시지를 사용자에게 보여줄 수 있습니다.

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

어떤 양식이 있으면 validate로 제출하십시오.

나머지 코드 만 사용하면됩니다.

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

... ... });

먼저 web.config에서 <serviceDebug includeExceptionDetailInFaults = "True"/>를 설정해야합니다.

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

오류 부분의 jquery 수준에서 다음과 같은 예외가 포함 된 오류 응답을 구문 분석해야합니다.

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

그런 다음 r.Message를 사용하여 예외 텍스트를 표시 할 수 있습니다.

완전한 코드 확인 : http://www.codegateway.com/2012/04/jquery-ajax-handle-exception-thrown-by.html