ASP.NET MVC 使用 AJAX 呼叫 JsonResult 並回傳自訂錯誤訊息完整指南

前言

在 ASP.NET MVC 開發中，透過 AJAX 非同步呼叫後端 `JsonResult` 方法是常見需求。本文將詳細說明如何正確實作 AJAX 呼叫，並建立自訂錯誤處理機制，讓前端能夠接收結構化的錯誤資訊。

一、基本 AJAX 呼叫 JsonResult 方法

後端 Controller 實作

首先建立一個回傳 `JsonResult` 的 Action 方法：

public JsonResult GetData()
{
    return new JsonResult
    {
        Data = new List<string> { "item1", "item2" },
        JsonRequestBehavior = JsonRequestBehavior.AllowGet
    };
}

關鍵點： 由於瀏覽器直接存取網址屬於 GET 請求，必須設定 `JsonRequestBehavior.AllowGet` 才能正常回傳 JSON 資料。

前端 jQuery AJAX 呼叫

$.ajax({
    url: "/Home/GetData",
    data: "",
    dataType: "json",
    type: "POST",
    contentType: "application/json; charset=utf-8",
    dataFilter: function(data) { return data; },
    success: function(data) {
        console.log("成功取得資料:", data);
    }
});

二、實作自訂錯誤訊息回傳機制

預設情況下 AJAX 錯誤僅能取得 HTTP 狀態碼，無法取得詳細錯誤內容。我們需要建立一個例外過濾器，在發生例外時回傳包含 `errorMessage` 的 JSON 物件，並將 HTTP 狀態碼設為 500。

建立 JsonExceptionFilterAttribute 過濾器

public class JsonExceptionFilterAttribute : FilterAttribute, IExceptionFilter
{
    public void OnException(ExceptionContext filterContext)
    {
        if (filterContext.RequestContext.HttpContext.Request.IsAjaxRequest())
        {
            filterContext.HttpContext.Response.StatusCode = 500;
            filterContext.ExceptionHandled = true;
            filterContext.Result = new JsonResult
            {
                Data = new { errorMessage = filterContext.Exception.Message },
                JsonRequestBehavior = JsonRequestBehavior.AllowGet
            };
        }
    }
}

套用過濾器並測試

[JsonExceptionFilterAttribute]
public JsonResult GetDataWithError()
{
    try
    {
        throw new Exception("伺服器內部錯誤：資料庫連線失敗");
    }
    catch (Exception ex)
    {
        // 可在此處記錄 Log
        throw; // 重新拋出讓過濾器捕捉
    }
}

前端錯誤處理

$.ajax({
    url: "/Home/GetDataWithError",
    type: "POST",
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    success: function(data) {
        console.log("成功:", data);
    },
    error: function(xhr) {
        try {
            var json = $.parseJSON(xhr.responseText);
            alert("錯誤訊息: " + json.errorMessage);
        } catch (e) {
            alert("發生未知錯誤");
        }
    }
});

總結

透過自訂 `IExceptionFilter` 過濾器，我們能夠統一處理 AJAX 請求的例外狀況，回傳結構化的錯誤資訊，並確保 HTTP 狀態碼正確為 500，讓前端能夠精準捕捉並顯示錯誤細節，大幅提升除錯效率與使用者體驗。