jQuery Ajax错误处理，显示自定义异常消息

我相信Ajax响应处理程序使用HTTP状态代码来检查是否存在错误。

因此，如果您只是在服务器端代码上抛出一个Java异常，但HTTP响应没有500状态代码，jQuery（或者在这种情况下可能是XMLHttpRequest相关文档对象）将假设一切正常。

我这么说是因为我在ASP.NET遇到了类似的问题，我抛出了类似于ArgumentException的东西（“不知道该怎么办…”），但错误处理程序没有触发。

然后我将Response.StatusCode设置为500或200，无论我是否有错误。

确保将Response.StatusCode设置为200以外的值。使用Response.Write编写异常消息，然后使用…

xhr.responseText

…在您的javascript中。

在服务器上抛出一个新的异常：

响应状态码

响应状态

我相信status描述返回到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

控制器：

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

这可能是由JSON字段名称没有引号引起的。

更改JSON结构：

{welcome:"Welcome"}

到：

{"welcome":"Welcome"}

您需要将responseText转换为JSON。使用JQuery：

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

通用/可重复使用的解决方案

这个答案是为所有遇到这个问题的人提供参考的。解决方案包括两件事：

1. 自定义异常ModelStateException在服务器上验证失败时抛出（当我们使用数据注释和使用强类型控制器操作参数时，模型状态报告验证错误）
2. 自定义控制器动作错误过滤器HandleModelStateExceptionAttribute捕获自定义异常并返回HTTP错误状态，主体中存在模型状态错误

这为jQuery Ajax调用提供了最佳的基础设施，可以在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}

整个问题在这篇博客文章中有详细说明，您可以在其中找到在应用程序中运行它的所有代码。

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

我发现这很好，因为我可以解析出我从服务器发送的消息，并在没有堆栈跟踪的情况下向用户显示一条友好的消息…

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

服务端

     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 propertyerror: function(jqXHR,error, errorThrown) {if(jqXHR.status&&jqXHR.status==400){alert(jqXHR.responseText);}else{alert("Something went wrong");}}});

通用Ajax错误处理

如果我需要对所有ajax请求进行一些通用的错误处理。我将设置ajaxError处理程序并在html内容顶部的名为error容器的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);});

首先我们需要在web.config中设置

<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

如果调用asp.net，这将返回错误消息标题：

我没有自己写所有的formatError Message，但我发现它非常有用。

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

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

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

……}）；

这就是我所做的，到目前为止它在MVC 5应用程序中工作。

控制器的返回类型是ContentResult。

public ContentResult DoSomething(){if(somethingIsTrue){Response.StatusCode = 500 //Anything other than 2XX HTTP status codes should workResponse.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;}});

虽然这个问题已经问了很多年了，但我仍然没有找到xhr.responseText作为我正在寻找的答案。它以以下格式返回给我字符串：

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

我绝对不想向用户展示。我正在寻找的是如下所示：

alert(xhr.responseJSON.message);

xhr.responseJSON.message给我来自Json对象的确切消息，可以显示给用户。

如果有人像2016年一样在这里寻找答案，请使用.fail()进行错误处理，因为从jQuery 3.0开始.error()已被弃用

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

希望能帮上忙

您在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，字符串文本状态，字符串错误抛出）

请求失败时要调用的函数。该函数接收三个参数：jqXHR（在jQuery 1.4. x中，XMLHttpRequest）对象、一个描述发生的错误类型的字符串和一个可选的异常对象（如果发生）。第二个参数（除null外）的可能值是“timeout”、“error”、“abort”和“parsererror”。当HTTP错误发生时，error Th的接收HTTP状态的文本部分，例如“未找到”或“内部服务器错误”。从jQuery 1.5开始，错误设置可以接受函数数组。每个函数将依次调用。注意：跨域脚本和跨域JSONP请求不调用此处理程序。

 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 stringif(data.status){ // true  not error$('#api_text').val(data.result);}else{$('#error_text').val(data.msg);}
}

在我的情况下，我刚刚从控制器中删除了HTTP VERB。

    **//[HttpPost]**   ---- just removed this verbpublic JsonResult CascadeDpGetProduct(long categoryId){       
List<ProductModel> list = new List<ProductModel>();list = dp.DpProductBasedOnCategoryandQty(categoryId);return Json(new SelectList(list, "Value", "Text", JsonRequestBehavior.AllowGet));}