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 相关文章推荐
ExtJS Grid使用SimpleStore、多选框的方法
Nov 20 Javascript
2010年最佳jQuery插件整理
Dec 06 Javascript
有趣的JavaScript数组长度问题代码说明
Jan 20 Javascript
js querySelector和getElementById通过id获取元素的区别
Apr 20 Javascript
jQuery(非HTML5)可编辑表格实现代码
Dec 11 Javascript
Bootstrap前端开发案例二
Jun 17 Javascript
微信小程序 用户数据解密详细介绍
Jan 09 Javascript
详解如何在Vue2中实现组件props双向绑定
Mar 29 Javascript
js封装成插件的步骤方法
Sep 11 Javascript
微信小程序与webview交互实现支付功能
Jun 07 Javascript
vue的滚动条插件实现代码
Sep 07 Javascript
AI小程序之语音听写来了,十分钟掌握百度大脑语音听写全攻略
Mar 13 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 AJAX实例根据邮编自动完成地址信息
2008/11/23 PHP
php 判断IP为有效IP地址的方法
2018/01/28 PHP
驱动事件的addEvent.js代码
2007/03/27 Javascript
js模仿html5 placeholder适应于不支持的浏览器
2013/01/13 Javascript
jQuery实现鼠标经过提示信息的地图热点效果
2015/04/26 Javascript
PHP+mysql+Highcharts生成饼状图
2015/05/04 Javascript
论Bootstrap3和Foundation5网格系统的异同
2016/05/16 Javascript
很酷的星级评分系统原生JS实现
2016/08/25 Javascript
jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】
2017/03/09 Javascript
angularjs+bootstrap实现自定义分页的实例代码
2017/06/19 Javascript
解决vue中post方式提交数据后台无法接收的问题
2018/08/11 Javascript
浅析微信扫码登录原理(小结)
2018/10/29 Javascript
基于vue.js实现分页查询功能
2018/12/29 Javascript
javascript数据类型中的一些小知识点(推荐)
2019/04/18 Javascript
详解vue2.0模拟后台json数据
2019/05/16 Javascript
Nodejs技巧之Exceljs表格操作用法示例
2019/11/06 NodeJs
HTML+JS实现“代码雨”效果源码(黑客帝国文字下落效果)
2020/03/17 Javascript
[58:32]EG vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[51:29]Alliance vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
python抓取网页内容示例分享
2014/02/24 Python
Python基于Pymssql模块实现连接SQL Server数据库的方法详解
2017/07/20 Python
matplotlib在python上绘制3D散点图实例详解
2017/12/09 Python
Python字符串的全排列算法实例详解
2019/01/07 Python
对Python3 pyc 文件的使用详解
2019/02/16 Python
用pyqt5 给按钮设置图标和css样式的方法
2019/06/24 Python
使用python-opencv读取视频,计算视频总帧数及FPS的实现
2019/12/10 Python
4款Python 类型检查工具,你选择哪个呢?
2020/10/30 Python
python字典按照value排序方法
2020/12/28 Python
HTML5页面嵌入小程序没有返回按钮及返回页面空白的问题
2020/05/28 HTML / CSS
德国综合购物网站:OTTO
2018/11/13 全球购物
司法所长先进事迹
2014/06/02 职场文书
安全环保演讲稿
2014/08/28 职场文书
优秀教研组申报材料
2014/12/26 职场文书
2019交通安全宣传标语集锦!
2019/06/28 职场文书
导游词之西递宏村
2019/12/10 职场文书
关于python pygame游戏进行声音添加的技巧
2021/10/24 Python