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 相关文章推荐
javascript中用星号表示预录入内容的实现代码
Jan 08 Javascript
input链接页面、打开新网页等等的具体实现
Dec 30 Javascript
jQuery中removeData()方法用法实例
Dec 27 Javascript
JS实现超简单的鼠标拖动效果
Nov 02 Javascript
JavaScript引用类型和基本类型详解
Jan 06 Javascript
深入理解angular2启动项目步骤
Jul 15 Javascript
浅谈webpack 自动刷新与解析
Apr 09 Javascript
详解Vue中watch的高级用法
May 02 Javascript
使用layer弹窗和layui表单实现新增功能
Aug 09 Javascript
jQuery实现的3D版图片轮播示例【滑动轮播】
Jan 18 jQuery
layui自定义ajax左侧三级菜单
Jul 26 Javascript
微信小程序基于movable-view实现滑动删除效果
Jan 08 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
第十二节 类的自动加载 [12]
2006/10/09 PHP
PHP使用SOAP扩展实现WebService的方法
2016/04/01 PHP
PHP中“=&gt;
2019/03/01 PHP
laravel框架邮箱认证实现方法详解
2019/11/22 PHP
JavaScript 题型问答有答案参考
2010/02/17 Javascript
分享10个原生JavaScript技巧
2015/04/20 Javascript
在JS方法中返回多个值的方法汇总
2015/05/20 Javascript
浅析JavaScript中的对象类型Object
2016/05/26 Javascript
使用Bootstrap框架制作查询页面的界面实例代码
2016/05/27 Javascript
Javascript 普通函数和构造函数的区别
2016/11/05 Javascript
Bootstrap 模态对话框只加载一次 remote 数据的完美解决办法
2017/07/09 Javascript
vue 双向数据绑定的实现学习之监听器的实现方法
2018/11/30 Javascript
vue数据初始化initState的实例详解
2019/04/11 Javascript
jquery插件开发模式实例详解
2019/07/20 jQuery
jQuery模仿ToDoList实现简单的待办事项列表
2019/12/30 jQuery
vue flex 布局实现div均分自动换行的示例代码
2020/08/05 Javascript
python创建和删除目录的方法
2015/04/29 Python
横向对比分析Python解析XML的四种方式
2016/03/30 Python
Python设计模式之中介模式简单示例
2018/01/09 Python
opencv改变imshow窗口大小,窗口位置的方法
2018/04/02 Python
在Python中居然可以定义两个同名通参数的函数
2019/01/31 Python
详解python多线程之间的同步(一)
2019/04/03 Python
从0开始的Python学习016异常
2019/04/08 Python
python异步实现定时任务和周期任务的方法
2019/06/29 Python
numpy求平均值的维度设定的例子
2019/08/24 Python
Python 开发工具通过 agent 代理使用的方法
2020/09/27 Python
Python __slots__的使用方法
2020/11/15 Python
纯HTML5+CSS3制作生日蛋糕代码
2016/11/16 HTML / CSS
cosme官方海外旗舰店:日本最大化妆品和美容产品的综合口碑网站
2017/01/18 全球购物
Baracuta官方网站:Harrington夹克,G9,G4,G10等
2018/03/06 全球购物
Paul Smith英国官网:英国国宝级时装品牌
2019/03/21 全球购物
人民教师求职自荐信
2014/03/12 职场文书
党支部特色活动方案
2014/08/20 职场文书
声乐专业大学生职业生涯规划书:理想的未来需要自己去打造
2014/09/20 职场文书
师德师风自查材料
2014/10/14 职场文书
生产车间管理制度
2015/08/04 职场文书