Ajax请求时无法重定向的问题解决代码详解
前言
今天发现，当使用Ajax请求时，如果后台进行重定向到其他页面时是无法成功的，只能在浏览器地址栏输入才能够实现重定向。
Ajax默认就是不支持重定向的，它是局部刷新，不重新加载页面。
需要实现的功能是，后台网关拦截请求，看请求中是否存在token.如果不存在就跳转到登录页面。因为大多数请求都是使用Ajax.一开始发现无法进行重定向，每次都是返回到Ajax的结果处理函数。最终的解决办法如下，需要后台和前端进行处理。
后台：
/**
*功能描述
*@authorlgj
*@Description重定向工具类
*@date2/27/19
*/
@Slf4j
publicclassRedirecUtil{
/**
*功能描述
*@authorlgj
*@Description重定向
*@date2/27/19
*@param:
*@return:
*
*/
publicstaticvoidredirect(RequestContextctx,StringredirectUrl){
try{
//如果是Ajax请求
if("XMLHttpRequest".equals(ctx.getRequest().getHeader("X-Requested-With"))){
log.debug("ajaxredirect");
sendRedirect(ctx.getResponse(),redirectUrl);
}
//如果是浏览器地址栏请求
else{
log.debug("normalredirect");
ctx.getResponse().sendRedirect(redirectUrl);
}
}
catch(Exceptionex){
ex.printStackTrace();
}
}
/**
*功能描述
*@authorlgj
*@DescriptionAjax请求时重定向处理
*@date2/27/19
*@param:
*@return:
*
*/
privatestaticvoidsendRedirect(HttpServletResponseresponse,StringredirectUrl){
try{
//这里并不是设置跳转页面，而是将重定向的地址发给前端，让前端执行重定向
//设置跳转地址
response.setHeader("redirectUrl",redirectUrl);
//设置跳转使能
response.setHeader("enableRedirect","true");
response.flushBuffer();
}catch(IOExceptionex){
log.error("Couldnotredirectto:"+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");
varurl=XHR.getResponseHeader("redirectUrl");
console.log("redirectUrl="+url);
varenable=XHR.getResponseHeader("enaleRedirect");
console.log("enableRedirect="+enable);
if((enable=="true")&&(url!="")){
varwin=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);
})
functionredirectHandle(xhr){
//获取后台返回的参数
varurl=xhr.getResponseHeader("redirectUrl");
console.log("redirectUrl="+url);
varenable=xhr.getResponseHeader("enableRedirect");
if((enable=="true")&&(url!="")){
varwin=window;
while(win!=win.top){
win=win.top;
}
win.location.href=url;
}
}
也可以将上述前端代码放入一个js文件中，在需要进行重定向的时候引入即可，便可以实现更高的代码复用率。
redirect.js
functionredirectHandle(xhr){
varurl=xhr.getResponseHeader("redirectUrl");
console.log("redirectUrl="+url);
varenable=xhr.getResponseHeader("enableRedirect");
if((enable=="true")&&(url!="")){
varwin=window;
while(win!=win.top){
win=win.top;
}
win.location.href=url;
}
}
$(function(){
$(document).ajaxComplete(function(event,xhr,settings){
console.log("ajaxCompleteadffdafadsaf")
redirectHandle(xhr);
})
})
引入js文件，src根据据实际情况设置。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。