解决Ajax请求时无法重定向的问题
今天发现,当使用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>
解决Ajax请求时无法重定向的问题的更多相关文章
- 解决由AJAX请求时forms认证实效的重新认证问题
前言: 当用AJAX请求一个资源时,服务器检查到认证过期,会重新返回302,通过HTTP抓包,是看到请求了登录页面的,但是JS是不会进行跳转到登录页面. 使用环境: ASP.NET MVC 4 JQU ...
- SpringMVC学习系列-后记 解决GET请求时中文乱码的问题
SpringMVC学习系列-后记 解决GET请求时中文乱码的问题 之前项目中的web.xml中的编码设置: <filter> <filter-name>CharacterEnc ...
- AJAX请求时status返回状态明细表(转)
转自:http://www.cnblogs.com/wangking/p/6530904.html AJAX请求时status返回状态明细表 readyState的五种状态2010-03-04 18: ...
- 解决Ajax请求跨域问题
from:https://blog.csdn.net/wang379275614/article/details/53333775 上篇文章提到,由于浏览器的同源策略,使得,AJAX请求只能发给同源的 ...
- AJAX请求时status返回状态明细表
AJAX请求时status返回状态明细表 readyState的五种状态2010-03-04 18:24对于readyState的五种状态的描述或者说定义,很多Ajax书(英文原版)中大都语焉不详 在 ...
- 只要发生ajax请求时加载旋转的按钮
定义一个变量 全局 c 只要发生ajax时给c++ 当ajax请求success或者error时,c--; 对加载的按钮添加个事件 监听 c 如果c得值没变化 则隐藏按钮 如果变化了则显示 ...
- 解决ajax请求(SpringMVC后台)响应415/400/405错误
解决ajax请求(SpringMVC后台)响应415/400/405错误 后端代码 bean public class user { private String username; private ...
- 解决ajax请求默认不支持重定向问题
1,Ajax默认是不支持重定向的,只局部刷新数据,不跳转页面. 2,后台代码处理: @RequestMapping("/updateCurrentUser") public Str ...
- $.ajax 请求 拦截器 重定向 无效 解决办法
在ajax 异步请求下 拦截器过滤器中使用 重定向 页面响应无效 我这里用的是springboot框架,用拦截器实现 对请求的拦截 ,session超时直接跳转到login.html页面. 后台代码: ...
随机推荐
- bootgrid
编写bootgrid前提条件 有关bootgrid的.css和.js库文件 参数:ajax: 必须设置为true post: 传递给Java的参数 url: 与java连接的方法名 ...
- Python Redis 的安装
安装 可以去pypi上找到redis的Python模块: http://pypi.python.org/pypi?%3Aaction=search&term=redis&submit= ...
- LeetCode Javascript实现 100. Same Tree 171. Excel Sheet Column Number
100. Same Tree /** * Definition for a binary tree node. * function TreeNode(val) { * this.val = val; ...
- Python startswith()方法
描述 Python startswith() 方法用于检查字符串是否是以指定子字符串开头,如果是则返回 True,否则返回 False.如果参数 beg 和 end 指定值,则在指定范围内检查. 语法 ...
- 利用pytesser识别图形验证码
简单识别 1.一般思路 验证码识别的一般思路为: 图片降噪 图片切割 图像文本输出 1.1 图片降噪 所谓降噪就是把不需要的信息通通去除,比如背景,干扰线,干扰像素等等,只剩下需要识别的文字,让图片变 ...
- Python中使用MongoEngine1
pymongo来操作MongoDB数据库,但是直接把对于数据库的操作代码都写在脚本中,这会让应用的代码耦合性太强,而且不利于代码的优化管理 一般应用都是使用MVC框架来设计的,为了更好地维持MVC结构 ...
- BZOJ_4325_NOIP2015 斗地主_DFS
BZOJ_4325_NOIP2015 斗地主_DFS Description 牛牛最近迷上了一种叫斗地主的扑克游戏.斗地主是一种使用黑桃.红心.梅花.方片的A到K加上大小王的共54张牌来进行的扑克牌游 ...
- jsp 基础知识之指令元素
由于考研和结业的事情,这里荒废了许久,而如今重新捡起来,是因为带到公司的碳素笔没有油了...... jsp的指令元素:通常以<%@开始,以%>结尾. jsp主要包括三种指令元素:pa ...
- WebService-----Xfire
Xfire相对Axis2 个人感觉相对简单一点,因为myEclipse上可以自动生成.而且在目前来讲,Xfire也是更受欢迎一点. 首先说明Xfire所用jar包:http://download.cs ...
- 【英国毕业原版】-《伯明翰城市大学毕业证书》BCU一模一样原件
☞伯明翰城市大学毕业证书[微/Q:865121257◆WeChat:CC6669834]UC毕业证书/联系人Alice[查看点击百度快照查看][留信网学历认证&博士&硕士&海归 ...