如何编写代码解决Ajax请求中无法重定向的问题详解？

更新于

2026-10-03 04:55:07

2阅读来源：SEO基础

内容介绍
文章标签
相关推荐

本文共计1140个文字，预计阅读时间需要5分钟。

前言：今天发现，在使用Ajax请求时，如果后台进行重定向到其他页面时，是无法成功实现的，只能在浏览器地址栏输入才能实现重定向。Ajax默认不支持重定向，它是局部刷新，不重新。

Ajax请求重定向问题解决方法：

1. 在发送Ajax请求前，在请求中添加`X-Requested-With:XMLHttpRequest`头部，以告诉服务器这是一个Ajax请求。

2.在服务器端，对于重定向的处理，可以使用302临时重定向或者303永久重定向。对于Ajax请求，推荐使用303重定向，因为303重定向可以保证浏览器的后退按钮正常工作。

3.在服务器端重定向后，可以返回一个状态码（如303），并在响应体中包含新的URL。

以下是一个示例：

javascript

$.ajax({ url: '/path/to/resource', type: 'GET', dataType: 'json', headers: { 'X-Requested-With': 'XMLHttpRequest' }, success: function(response) { // 处理响应 }, error: function(xhr, status, error) { // 处理错误 }});

在服务器端，使用303重定向：

java// Java示例response.setStatus(HttpServletResponse.SC SEE_OTHER);response.setHeader(Location, http://example.com/new-url);

通过以上方法，即使后台进行重定向，Ajax请求也可以成功跳转到新的URL。

前言

今天发现，当使用Ajax请求时，如果后台进行重定向到其他页面时是无法成功的，只能在浏览器地址栏输入才能够实现重定向。

Ajax默认就是不支持重定向的，它是局部刷新，不重新加载页面。

需要实现的功能是，后台网关拦截请求，看请求中是否存在token.如果不存在就跳转到登录页面。因为大多数请求都是使用Ajax.一开始发现无法进行重定向，每次都是返回到Ajax的结果处理函数。最终的解决办法如下，需要后台和前端进行处理。

后台：

/** *功能描述 * @author lgj * @Description 重定向工具类 * @date 2/27/19 */ @Slf4j public class RedirecUtil { /** *功能描述 * @author lgj * @Description 重定向 * @date 2/27/19 * @param: * @return: * */ public static void redirect(RequestContext ctx, String redirectUrl){ try{ //如果是Ajax请求 if("XMLHttpRequest".equals(ctx.getRequest().getHeader("X-Requested-With"))){ log.debug("ajax redirect"); sendRedirect(ctx.getResponse(),redirectUrl); } //如果是浏览器地址栏请求 else { log.debug("normal redirect "); ctx.getResponse().sendRedirect(redirectUrl); } } catch(Exception ex){ ex.printStackTrace(); } } /** *功能描述 * @author lgj * @Description Ajax请求时重定向处理 * @date 2/27/19 * @param: * @return: * */ private static void sendRedirect(HttpServletResponse response, String redirectUrl){ try { 　　　　　　　//这里并不是设置跳转页面，而是将重定向的地址发给前端，让前端执行重定向 //设置跳转地址 response.setHeader("redirectUrl", redirectUrl); //设置跳转使能 response.setHeader("enableRedirect","true"); response.flushBuffer(); } catch (IOException ex) { log.error("Could not redirect to: " + redirectUrl, ex); } } }

前端处理

第一种方式：使用Ajax的complete方法

$.ajax({ type: "post", url: "/auth/token/check", success: function(data,status){ console.log("/token/check 返回 status : "+status) }, //请求完成调用 (XHR, TS){ console.log("complete"); var url = XHR.getResponseHeader("redirectUrl"); console.log("redirectUrl = " + url); var enable = XHR.getResponseHeader("enaleRedirect"); console.log("enableRedirect = " + enable); if((enable == "true") && (url != "")){ var win = window; 　　　　　　　　 while(win != win.top){ 　　　　　　win = win.top; 　　　　　　　　} 　　　　　　　　 win.location.href = url; 　　　　　　　　　　} 　　　　　　}, 　　　　}); })

但是上面有个问题就是，每个ajax都需要编写 comlete 方法，代码复用率低。

第二种方法：使用全局的complete方法

ajax请求

$("#NON-TOKEN").click(function () { $.ajax({ type: "post", url: "/auth/token/check", success: function(data,status){ console.log("/token/check 返回 status : "+status) }, });

全局处理

注意这参数(event, xhr, settings)不能少，否则会报错。

//每一个Ajax 请求完成之后都会执行。 $(document).ajaxComplete(function (event, xhr, settings) { console.log("ajaxComplete ") redirectHandle(xhr); })

也可以将上述前端代码放入一个js文件中，在需要进行重定向的时候引入即可，便可以实现更高的代码复用率。

redirect.js

引入js文件，src根据据实际情况设置。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。

标签：问题解决代码