解决Ajax请求时无法重定向的问题
2019-02-27 11:53:20来源:博客园 阅读 ()
今天发现,当使用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); })
function redirectHandle(xhr) {
//获取后台返回的参数 var url = xhr.getResponseHeader("redirectUrl"); console.log("redirectUrl = " + url); var enable = xhr.getResponseHeader("enableRedirect"); if((enable == "true") && (url != "")){ var win = window; while(win != win.top){ win = win.top; } win.location.href = url; }
}
也可以将上述前端代码放入一个js文件中,在需要进行重定向的时候引入即可,便可以实现更高的代码复用率。
redirect.js
function redirectHandle(xhr) { var url = xhr.getResponseHeader("redirectUrl"); console.log("redirectUrl = " + url); var enable = xhr.getResponseHeader("enableRedirect"); if((enable == "true") && (url != "")){ var win = window; while(win != win.top){ win = win.top; } win.location.href = url; } } $(function () { $(document).ajaxComplete(function (event, xhr, settings) { console.log("ajaxComplete adffdafadsaf") redirectHandle(xhr); }) })
引入js文件,src根据据实际情况设置。
<script src="/common/redirect.js"></script>
原文链接:https://www.cnblogs.com/lgjlife/p/10445483.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- 聊聊微服务架构及分布式事务解决方案! 2020-06-10
- 【从单体架构到分布式架构】(二)请求增多,单点变集群(1) 2020-06-07
- 解决IDEA Maven下载依赖包速度慢问题 2020-06-05
- Java生鲜电商平台-生鲜电商中配送订单解决方案(小程序/APP) 2020-05-31
- 一口气说出8种幂等性解决重复提交的方案,面试官懵了! 2020-05-30
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash