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 相关文章推荐
用jquery方法操作radio使其默认选项是否
Sep 10 Javascript
jQuery控制TR显示隐藏的三种常用方法
Aug 21 Javascript
JS实现的通用表单验证插件完整实例
Aug 20 Javascript
Asp.Net之JS生成分页条的方法
Nov 23 Javascript
AngularJs篇:使用AngularJs打造一个简易权限系统的实现代码
Dec 26 Javascript
基于javascript 显式转换与隐式转换(详解)
Dec 15 Javascript
基于react后端渲染模板引擎noox发布使用
Jan 11 Javascript
Vue 中使用vue2-highcharts实现曲线数据展示的方法
Mar 05 Javascript
微信小程序实现星星评价效果
Nov 02 Javascript
vue中使用vue-cli接入融云实现即时通信
Apr 19 Javascript
详解vue中使用vue-quill-editor富文本小结(图片上传)
Apr 24 Javascript
vue打包通过image-webpack-loader插件对图片压缩优化操作
Nov 12 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 会话(session 时间设定)使用入门代码
2008/06/05 PHP
删除无限分类并同时删除它下面的所有子分类的方法
2010/08/08 PHP
php下批量挂马和批量清马代码
2011/02/27 PHP
关于Iframe如何跨域访问Cookie和Session的解决方法
2013/04/15 PHP
php中hashtable实现示例分享
2014/02/13 PHP
PHP Streams(流)详细介绍及使用
2015/05/12 PHP
php中青蛙跳台阶的问题解决方法
2018/10/14 PHP
php 实现简单的登录功能示例【基于thinkPHP框架】
2019/12/02 PHP
JavaScript 全角转半角部分
2009/10/28 Javascript
Javascript在IE或Firefox下获取鼠标位置的代码
2009/12/18 Javascript
js实现在文本框光标处添加字符的方法介绍
2012/11/24 Javascript
js中将String转换为number以便比较
2014/07/08 Javascript
js选择并转移导航菜单示例代码
2014/08/19 Javascript
Vue-resource实现ajax请求和跨域请求示例
2017/02/23 Javascript
vue下载二进制流图片操作
2020/10/26 Javascript
微信小程序弹窗禁止页面滚动的实现代码
2020/12/30 Javascript
jenkins自动构建发布vue项目的方法步骤
2021/01/04 Vue.js
[02:12]2015国际邀请赛 SHOWOPEN
2015/08/05 DOTA
深入理解Python 关于supper 的 用法和原理
2018/02/28 Python
基于Python List的赋值方法
2018/06/23 Python
运行python提示no module named sklearn的解决方法
2020/11/29 Python
CSS3中Animation动画属性用法详解
2016/07/04 HTML / CSS
html5记忆翻牌游戏实现思路及代码
2013/07/25 HTML / CSS
美国从事品牌鞋类零售的连锁店:Famous Footwear
2016/08/25 全球购物
美国卡车、吉普车和SUV零件网站:4 Wheel Parts
2016/11/24 全球购物
波兰灯具、照明和LED购物网站:Lampy.pl
2019/03/11 全球购物
判断单链表中是否存在环
2012/07/16 面试题
建筑自我鉴定
2013/10/19 职场文书
体育课外活动总结
2014/07/08 职场文书
四风查摆剖析材料
2014/10/10 职场文书
机关干部作风整顿心得体会
2016/01/22 职场文书
八年级作文之一起的走过日子
2019/09/17 职场文书
vue backtop组件的实现完整代码
2021/04/07 Vue.js
解析在浏览器地址栏输入一个URL后发生了什么
2021/06/21 Servers
Python 多线程处理任务实例
2021/11/07 Python
Apache Hudi 加速传统的批处理模式
2022/04/24 Servers