jQuery अजाक्स त्रुटि हैंडलिंग, कस्टम अपवाद संदेश दिखाएं


726

क्या कोई तरीका है जिससे मैं अपने jQuery AJAX त्रुटि संदेश में अलर्ट के रूप में कस्टम अपवाद संदेश दिखा सकता हूं?

उदाहरण के लिए, यदि मैं स्ट्रट्स द्वारा सर्वर साइड पर अपवाद छोड़ना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 है।

मुझे यकीन नहीं है कि मैं गलत कहां जा रहा हूं। इस समस्या को सुलझाने में मैं क्या कर सकता हूं?

जवाबों:


357

सुनिश्चित करें कि आप Response.StatusCode200 के अलावा किसी अन्य चीज़ पर सेटिंग कर रहे हैं । अपने अपवाद के संदेश का उपयोग करके लिखें Response.Write, फिर उपयोग करें ...

xhr.responseText

.. आपकी जावास्क्रिप्ट


9
यह 2 साल और डेढ़ साल बाद भी ऐसा करने का सही तरीका है ... :) मैं थोड़ा आगे चला गया और वास्तव में अपनी खुद की त्रुटि JSON ऑब्जेक्ट को वापस कर सकता हूं जो एकल या एकाधिक त्रुटियों को संभाल सकता है, सर्वर-साइड फॉर्म सत्यापन के लिए काफी अच्छा है।
एलेक्सकोड

@Wilson यह अन्य उच्च श्रेणी के उत्तर में दिखाया गया था।
स्प्रिंटस्टार

3
अब 2014 में हूँ। JSON युग का प्रभुत्व। इसलिए मैं उपयोग करता हूं xhr.responseJSON। : डी
रवि १०

5
xhr.responseJSON केवल तभी सेट किया जाता है यदि आप सुनिश्चित करते हैं, कि मेटा-प्रकार सेट है (उदाहरण के लिए "सामग्री-प्रकार: अनुप्रयोग / json")। यह एक ऐसी समस्या है जिसका मैंने अभी सामना किया है; responseText सेट किया गया था - responseJSON नहीं था।
इगोर

217

नियंत्रक:

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

13
यह सवाल का "सही" उत्तर नहीं है, लेकिन यह निश्चित रूप से समस्या का एक उच्च स्तरीय समाधान दिखाता है ... अच्छा!
रयान एंडरसन

3
मैं भी कुछ ऐसा ही कर रहा हूं। सब कुछ ठीक है अगर यह विकास के बक्से पर है। अगर मैं नेटवर्क पर एक अलग बॉक्स से कनेक्ट करने का प्रयास करता हूं, तो xhr.responseText में सामान्य त्रुटि पृष्ठ html है और मेरा कस्टम संदेश नहीं है, देखें stackoverflow.com/questions/3882752/…
jamiebarrow

6
मेरा मानना ​​है कि आपको प्रतिक्रिया भी जोड़नी चाहिए । सैटसकोड = 500; OnException विधि के लिए लाइन।
अलेक्जेंडर प्रोकोफयेव

4
मैंने इसे अनुकूलित किया - क्योंकि मैं 500 स्टेटकोड चाहता था, लेकिन स्टेटस डिस्क्रिप्शन में अपवाद संदेश ("आंतरिक सर्वर त्रुटि" के बजाय) - response.StatusCode = (int)HttpStatusCode.InternalServerError;औरresponse.StatusDescription = filterContext.Exception.Message;
Kram

4
यदि आप IIS7 या इसके बाद के संस्करण का उपयोग कर रहे हैं, तो आपको जोड़ने की आवश्यकता हो सकती है: response.TrySkipIisCustomErrors = true;
जेम्स गॉंट

97

सर्वर साइड:

     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 कंटेंट के शीर्ष पर एक div error errorcontainer नाम की त्रुटि प्रदर्शित करूँगा।

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

81

आपको responseTextJSON में कनवर्ट करना होगा। JQuery का उपयोग:

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

5
+1 'कारण यह वर्तमान में इस प्रश्न का एकमात्र उत्तर है! अपवाद संदेश प्राप्त करने के लिए आप "jsonValue.Message" कॉल कर सकते हैं।
कैप्टन सेंसिबल

2
वास्तव में इसका सही उत्तर नहीं है क्योंकि सवाल JSON के बारे में नहीं पूछता है और उदाहरण अनुरोध विशेष रूप से प्रतिक्रिया के रूप में HTML के लिए पूछता है।
सिंगलशॉट

+1 सही। ध्यान दें, यह एक सामान्य है JSONXHR.responseText (स्ट्रिंग) के माध्यम से एक JSON एनकोडेड ऑब्जेक्ट भेजने के लिए। फिर आप jsonValue ऑब्जेक्ट का उपयोग कर सकते हैं कि आपको किस प्रकार की आवश्यकता है। कंसोल.लॉग (jsonValue) का उपयोग करके प्रतिक्रिया की समीक्षा करने के लिए फायरबग कंसोल का उपयोग करें।
jjwdesign


1
पार्स की गई JSON ऑब्जेक्ट को jXXHR ऑब्जेक्ट के responseJSON प्रॉपर्टी के माध्यम से उपलब्ध कराया गया है। तो responseText संपत्ति पार्स करने की कोई जरूरत नहीं है। आप बस कर सकते हैं: कंसोल.लॉग (jqXHR.responseJSON.Message)
एरिक डिसूजा

37

यदि 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) ); 
})

22

यह वही है जो मैंने किया था और यह 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;
    }
});

20

यदि कोई व्यक्ति 2016 में उत्तर के लिए यहां है, तो .fail()त्रुटि से निपटने के लिए उपयोग के .error()रूप में jQuery 3.0 के रूप में पदावनत किया गया है

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

मुझे उम्मीद है यह मदद करेगा


2
jqXHR.error()jQuery 3.0 में पदावनत (वास्तव में हटा दिया गया) है, errorऔर successकॉलबैक को $.ajax()पदावनत नहीं किया जाता है, जहां तक ​​मुझे पता है।
नील कॉनवे

16

एक सामान्य / पुन: प्रयोज्य समाधान

यह उत्तर उन सभी के भविष्य के संदर्भ के लिए प्रदान किया जाता है जो इस समस्या से टकराते हैं। समाधान में दो चीजें शामिल हैं:

  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
}

पूरी समस्या इस ब्लॉग पोस्ट में विस्तृत है जहाँ आप अपने आवेदन में इसे चलाने के लिए सभी कोड पा सकते हैं।


14

मुझे यह अच्छा लगा क्योंकि मैं सर्वर से भेजे गए संदेश को पार्स कर सकता था और स्टैक्रेस के बिना उपयोगकर्ता के लिए एक अनुकूल संदेश प्रदर्शित कर सकता था ...

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

10

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

}


7

यह संभवतया JSON फ़ील्ड नामों के उद्धरण चिह्नों के कारण होता है।

JSON संरचना को इसमें से बदलें:

{welcome:"Welcome"}

सेवा:

{"welcome":"Welcome"}

1
यह तब तक मायने नहीं रखता जब तक कि JS में कुंजी एक आरक्षित शब्द नहीं है। मैं इस मुद्दे को यहाँ नहीं देख रहा हूँ।
जॉन गिब

1
JSON.stringify ({स्वागत: "वेलकम"}) -> {"वेलकम": "वेलकम"}
थुलसीराम

5

मेरा मानना ​​है कि यदि कोई त्रुटि थी, तो अजैक्स प्रतिक्रिया हैंडलर HTTP स्थिति कोड का उपयोग करता है।

इसलिए यदि आप अपने सर्वर साइड कोड पर सिर्फ एक जावा अपवाद को फेंकते हैं, लेकिन तब HTTP प्रतिक्रिया के पास 500 स्थिति कोड jQuery नहीं है (या शायद इस मामले में XMLHttpRequest ऑब्जेक्ट) बस मान लेंगे कि सब कुछ ठीक था।

मैं यह कह रहा हूं क्योंकि मुझे ASP.NET में एक समान समस्या थी, जहां मैं एक ArgumentException ("पता नहीं क्या करना है ...") की तरह कुछ फेंक रहा था, लेकिन त्रुटि हैंडलर फायरिंग नहीं कर रहा था।

मैंने तब Response.StatusCode500 या 200 में सेट किया था कि क्या मेरे पास कोई त्रुटि थी या नहीं।


5

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

5

आपके पास अपवाद वस्तु में JSON ऑब्जेक्ट है, xhr ऑब्जेक्ट में। महज प्रयोग करें

alert(xhr.responseJSON.Message);

JSON ऑब्जेक्ट दो अन्य गुणों को उजागर करता है: 'अपवाद' और 'StackTrace'



4

यह फ़ंक्शन मूल रूप से अद्वितीय यादृच्छिक 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));
}

वैकल्पिक कॉलबैक पैरामीटर लोड () विधि के पूरा होने पर चलने के लिए कॉलबैक फ़ंक्शन को निर्दिष्ट करता है। कॉलबैक फ़ंक्शन के अलग-अलग पैरामीटर हो सकते हैं:

प्रकार: फ़ंक्शन (jqXHR jqXHR, स्ट्रिंग टेक्स्टस्टैटस, स्ट्रिंग त्रुटि।

एक फ़ंक्शन जिसे अनुरोध विफल होने पर बुलाया जाता है। फ़ंक्शन को तीन तर्क मिलते हैं: jqXHR (jQuery 1.4.x, XMLHttpRequest में) ऑब्जेक्ट, एक स्ट्रिंग जो त्रुटि के प्रकार और एक वैकल्पिक अपवाद ऑब्जेक्ट का वर्णन करता है, यदि कोई हुआ। दूसरे तर्क के लिए संभावित मान (शून्य के अलावा) "टाइमआउट", "त्रुटि", "गर्भपात", और "पारसेरोर" हैं। जब कोई HTTP त्रुटि होती है, तो errorThrown HTTP स्थिति का पाठ भाग प्राप्त करता है, जैसे "Not Found" या "आंतरिक त्रुटि"। JQuery 1.5 के अनुसार, त्रुटि सेटिंग कार्यों की एक सरणी को स्वीकार कर सकती है। प्रत्येक फ़ंक्शन को बदले में बुलाया जाएगा। नोट: इस हैंडलर को क्रॉस-डोमेन स्क्रिप्ट और क्रॉस-डोमेन JSONP अनुरोधों के लिए नहीं कहा जाता है।


3

उपयोग कर सर्वर पर एक नया अपवाद फेंक दें:

प्रतिक्रिया। सत्तुसकोड = 500

प्रतिक्रिया।

मेरा मानना ​​है कि StatusDescription को अजाक्स कॉल में वापस कर दिया गया है ...

उदाहरण:

        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

2

हालाँकि इस प्रश्न को पूछे जाने में कई साल हो चुके हैं, फिर भी xhr.responseTextमुझे वह उत्तर नहीं मिल रहा है जैसा मैं देख रहा था। इसने मुझे निम्नलिखित प्रारूप में स्ट्रिंग दिया:

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

जो मैं निश्चित रूप से उपयोगकर्ताओं को दिखाना नहीं चाहता। मैं क्या देख रहा था नीचे कुछ इस तरह है:

alert(xhr.responseJSON.message);

xhr.responseJSON.message मुझे Json ऑब्जेक्ट से सटीक संदेश देता है जिसे उपयोगकर्ताओं को दिखाया जा सकता है।


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

अगर कोई फॉर्म है तो वेरीफाइड के साथ सबमिट करें

बस बाकी कोड का उपयोग करें

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

... ... });


0

सबसे पहले हमें web.ffp में <serviceDebug मेंExceptionDetailInFaults = "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

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.