Ajax请求时无法重定向的问题解决代码详解


Posted in Javascript onJune 21, 2019

前言

今天发现,当使用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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
IE下window.onresize 多次调用与死循环bug处理方法介绍
Nov 12 Javascript
浅析Node.js查找字符串功能
Sep 03 Javascript
jQuery中dom元素上绑定的事件详解
Apr 24 Javascript
jQuery EasyUI 布局之动态添加tabs标签页
Nov 18 Javascript
基于jQuery插件jqzoom实现的图片放大镜效果示例
Jan 23 Javascript
利用 spin.js 生成等待效果(js 等待效果)
Jun 25 Javascript
vue购物车插件编写代码
Nov 27 Javascript
解决layui 复选框等内置控件不显示的问题
Aug 14 Javascript
node中的密码安全(加密)
Sep 17 Javascript
vue实现绑定事件的方法实例代码详解
Jun 20 Javascript
JS 事件机制完整示例分析
Jan 15 Javascript
Vue路由 重定向和别名的区别说明
Sep 09 Javascript
vue配置文件实现代理v2版本的方法
Jun 21 #Javascript
微信小程序自定义多列选择器使用详解
Jun 21 #Javascript
详解Webpack如何引入CDN链接来优化编译后的体积
Jun 21 #Javascript
Vue多环境代理配置方法思路详解
Jun 21 #Javascript
微信小程序实现卡片层叠滑动效果
Jun 21 #Javascript
使用express来代理服务的方法
Jun 21 #Javascript
react+redux仿微信聊天界面
Jun 21 #Javascript
You might like
用PHP即时捕捉PHP中的错误并发送email通知的实现代码
2013/01/19 PHP
PHP模板引擎Smarty内置变量调解器用法详解
2016/04/11 PHP
thinkPHP统计排行与分页显示功能示例
2016/12/02 PHP
JS Timing
2007/04/21 Javascript
超强的IE背景图片闪烁(抖动)的解决办法
2007/09/09 Javascript
Prototype 学习 工具函数学习($w,$F方法)
2009/07/12 Javascript
浅析JQuery获取和设置Select选项的常用方法总结
2013/07/04 Javascript
js/html光标定位的实现代码
2013/09/23 Javascript
JS格式化数字保留两位小数点示例代码
2013/10/15 Javascript
jQuery实现鼠标单击网页文字后在文本框显示的方法
2015/05/06 Javascript
javascript函数命名的三种方式及区别介绍
2016/03/22 Javascript
js获取页面引用的css样式表中的属性值方法(推荐)
2016/08/19 Javascript
JS新包管理工具yarn和npm的对比与使用入门
2016/12/09 Javascript
js实现会跳动的日历效果(完整实例)
2017/10/18 Javascript
vue项目动态设置页面title及是否缓存页面的问题
2018/11/08 Javascript
vue中eslintrc.js配置最详细介绍
2018/12/21 Javascript
vuejs移动端实现div拖拽移动
2019/07/25 Javascript
js前端如何写一个精确的倒计时代码
2019/10/25 Javascript
vue element-ui实现动态面包屑导航
2019/12/23 Javascript
django写用户登录判定并跳转制定页面的实例
2019/08/21 Python
python数据处理之如何选取csv文件中某几行的数据
2019/09/02 Python
Pytorch 的损失函数Loss function使用详解
2020/01/02 Python
python可视化text()函数使用详解
2020/02/11 Python
通俗讲解python 装饰器
2020/09/07 Python
Python实现Appium端口检测与释放的实现
2020/12/31 Python
丝芙兰美国官网:SEPHORA美国
2016/08/03 全球购物
父亲的菜园教学反思
2014/02/13 职场文书
奉献演讲稿范文
2014/05/21 职场文书
一份文言文检讨书
2014/09/13 职场文书
2014年专项整治工作总结
2014/11/17 职场文书
2014年乡镇民政工作总结
2014/12/02 职场文书
2015年行政执法工作总结
2015/05/23 职场文书
golang goroutine顺序输出方式
2021/04/29 Golang
python实现进度条的多种实现
2021/04/29 Python
JavaScript原始值与包装对象的详细介绍
2021/05/11 Javascript
Java 轮询锁使用时遇到问题
2022/05/11 Java/Android