latest - jquery v3 3.1 download




jQuery Ajax معالجة الأخطاء ، إظهار رسائل استثناء مخصصة (14)

هل هناك طريقة يمكنني بها إظهار رسائل استثناء مخصصة كتنبيه في رسالة الخطأ jQuery AJAX الخاصة بي؟

على سبيل المثال ، إذا كنت ترغب في رمي استثناء على جانب الخادم عبر Struts عن طريق طرح 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.

لست متأكدا من أين أخطئ. ما الذي يمكنني فعله لإصلاح هذه المشكلة؟


حل عام / يعاد استخدامه

يتم توفير هذه الإجابة للإشارة في المستقبل إلى كل تلك التي تصطدم في هذه المشكلة. الحل يتكون من أمرين:

  1. استثناء مخصص ModelStateException الذي يتم طرحه عند فشل التحقق من الصحة على الخادم (تقارير حالة النموذج عن أخطاء التحقق من الصحة عند استخدام التعليقات التوضيحية للبيانات واستخدام معلمات إجراءات وحدة تحكم مكتوبة قوية)
  2. عامل تصفية خطأ إجراء وحدة تحكم مخصصة HandleModelStateExceptionAttribute الذي HandleModelStateExceptionAttribute الاستثناء المخصص وإرجاع حالة خطأ HTTP مع خطأ حالة الطراز في النص الأساسي

وهذا يوفر البنية التحتية المثلى لمكالمات jQuery Ajax لاستخدام كامل إمكاناتها مع معالجات error success .

رمز الجانب العميل

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

المشكلة كاملة مفصّلة في هذا التدوينة ، حيث يمكنك العثور على جميع التعليمات البرمجية لتشغيلها في تطبيقك.


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

إذا كان هناك شخص ما هنا في عام 2016 للإجابة ، فاستخدم .fail() لمعالجة الأخطاء حيث تم إهمال .error() اعتبارًا من jQuery 3.0

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

اتمني ان يكون مفيدا


تأكد من إعداد Response.StatusCode إلى شيء آخر غير 200. اكتب رسالة الاستثناء باستخدام Response.Write ، ثم استخدم ...

xhr.responseText

..في جافا سكريبت الخاص بك.


على الرغم من مرور عدة سنوات على طرح هذا السؤال ، ما زلت لا أجد xhr.responseText كنت أبحث عنها. عاد لي سلسلة بالتنسيق التالي:

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

التي لا أرغب بالتأكيد في إظهارها للمستخدمين. ما كنت أبحث عنه هو شيء من هذا القبيل:

alert(xhr.responseJSON.message);

xhr.responseJSON.message يعطيني الرسالة الدقيقة من كائن Json والتي يمكن عرضها للمستخدمين.


في حالة إجراء مكالمة إلى 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) ); 
})

لقد وجدت أن هذا أمر لطيف لأنني يمكن أن تحليل الرسالة التي أرسلها من الخادم وعرض رسالة ودية للمستخدم دون stacktrace ...

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

من المحتمل أن يكون السبب في ذلك هو أن أسماء حقول JSON لا تحتوي على علامات اقتباس.

تغيير بنية JSON من:

{welcome:"Welcome"}

إلى:

{"welcome":"Welcome"}

هذا ما فعلته وهو يعمل حتى الآن في تطبيق 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

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

يجب عليك تحويل responseText إلى JSON. باستخدام JQuery:

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

جانب الخادم:

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

Generic اياكس خطأ معالجة

إذا كنت بحاجة إلى القيام ببعض الأخطاء العامة للتعامل مع جميع طلبات ajax. سأقوم بتعيين معالج ajaxError وعرض الخطأ على div المسمى errorcontainer أعلى محتوى 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);
                 });

مراقب:

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

$("#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({...

... ... });


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




custom-exceptions