如何在jQuery Ajax调用后管理重定向请求

技术背景

在使用jQuery进行AJAX请求时，浏览器会透明地处理重定向（如301、302状态码），这会导致AJAX请求无法按预期处理重定向逻辑。例如，当用户会话过期，服务器返回重定向到登录页面的响应时，浏览器会自动跳转，而不是让AJAX请求的回调函数处理。为了解决这个问题，需要找到合适的方法来管理AJAX请求后的重定向。

实现步骤

方法一：使用JSON响应

服务器端：所有AJAX请求的响应状态码设置为200，响应体包含一个JSON对象。例如，响应对象可以有redirect和form两个成员，分别表示重定向的URL和替换现有表单的HTML内容。
客户端：使用jQuery的$.ajax方法处理响应。示例代码如下：

$.ajax({
    type: "POST",
    url: reqUrl,
    data: reqBody,
    dataType: "json",
    success: function(data, textStatus) {
        if (data.redirect) {
            // data.redirect contains the string URL to redirect to
            window.location.href = data.redirect;
        } else {
            // data.form contains the HTML for the replacement form
            $("#myform").replaceWith(data.form);
        }
    }
});

方法二：添加自定义响应头

服务器端：在响应中添加自定义头。例如，在ASP.NET MVC中，可以在控制器方法中添加自定义头：

public ActionResult Index(){
    if (!HttpContext.User.Identity.IsAuthenticated)
    {
        HttpContext.Response.AddHeader("REQUIRES_AUTH","1");
    }
    return View();
}

客户端：绑定ajaxSuccess事件，检查自定义头是否存在。示例代码如下：

$(document).ajaxSuccess(function(event, request, settings) {
    if (request.getResponseHeader('REQUIRES_AUTH') === '1') {
       window.location = '/';
    }
});

方法三：使用回调包装函数

服务器端：正常处理AJAX请求，返回HTML内容。
客户端：使用回调包装函数检查返回的HTML中是否存在特定元素。示例代码如下：

function cbWrapper(data, funct){
    if($("#myForm", data).length > 0)
        top.location.href="login.htm";//redirection
    else
        funct(data);
}

$.post("myAjaxHandler", 
       {
        param1: foo,
        param2: bar
       },
       function(data){
           cbWrapper(data, myActualCB);
       }, 
       "html"
);

方法四：使用HTTP状态码4xx

服务器端：当需要重定向时，返回4xx状态码（如401、403），并可以添加自定义头。例如，在Global.asax中处理：

protected void Application_EndRequest()
{
    if (Context.Response.StatusCode == 302
        && (new HttpContextWrapper(Context)).Request.IsAjaxRequest())
    {                
        Context.Response.StatusCode = 200;
        Context.Response.AddHeader("REQUIRES_AUTH", "1");
    }
}

客户端：绑定ajaxError事件，处理4xx状态码。示例代码如下：

$(document).ajaxError(function (event, jqxhr, settings, exception) {
    if (jqxhr.status == 401) {
        location.reload(true);
    }
});

核心代码

使用JSON响应的核心代码

$.ajax({
    type: "POST",
    url: reqUrl,
    data: reqBody,
    dataType: "json",
    success: function(data, textStatus) {
        if (data.redirect) {
            window.location.href = data.redirect;
        } else {
            $("#myform").replaceWith(data.form);
        }
    }
});

添加自定义响应头的核心代码

// 服务器端
public ActionResult Index(){
    if (!HttpContext.User.Identity.IsAuthenticated)
    {
        HttpContext.Response.AddHeader("REQUIRES_AUTH","1");
    }
    return View();
}

// 客户端
$(document).ajaxSuccess(function(event, request, settings) {
    if (request.getResponseHeader('REQUIRES_AUTH') === '1') {
       window.location = '/';
    }
});