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

 更新时间:2019年06月21日 10:09:44   作者:冬眠的山谷  
这篇文章主要介绍了Ajax请求时无法重定向的问题解决代码详解,当使用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>

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

相关文章

  • 理解javascript异步编程

    理解javascript异步编程

    这篇文章主要为大家介绍了javascript异步编程,从浅入深的学习javascript异步编程,对javascript异步编程感兴趣的小伙伴们可以参考一下
    2016-01-01
  • JS实现含有中文字符串的友好截取功能分析

    JS实现含有中文字符串的友好截取功能分析

    这篇文章主要介绍了JS实现含有中文字符串的友好截取功能,结合实例形式分析了JS针对含有中文的字符串截取操作相关原理与实现技巧,需要的朋友可以参考下
    2017-03-03
  • javascript实现悬浮跟随框缓动效果

    javascript实现悬浮跟随框缓动效果

    这篇文章主要为大家详细介绍了javascript实现悬浮跟随框缓动效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • JavaScript通过HTML的class来获取HTML元素的方法总结

    JavaScript通过HTML的class来获取HTML元素的方法总结

    除了getElementsByClassName()函数,我们可以自己动手编写程式来通过class获取元素,接下来我们整理了一下JavaScript通过HTML的class来获取HTML元素的方法总结,需要的朋友可以参考下
    2016-05-05
  • javascript通过class来获取元素实现代码

    javascript通过class来获取元素实现代码

    javascript获取元素有很多的方法,本文简单的介绍下通过class获取元素的实现代码,感兴趣的朋友可以参考下,希望本文知识点可以帮助到你
    2013-02-02
  • 微信web端后退强制刷新功能的实现代码

    微信web端后退强制刷新功能的实现代码

    这篇文章主要介绍了微信web端后退强制刷新功能的实现代码,需要的朋友可以参考下
    2018-03-03
  • javascript 小数取整简单实现方式

    javascript 小数取整简单实现方式

    这篇文章主要介绍了javascript 小数取整d的简单实现方式,需要的朋友可以参考下
    2014-05-05
  • js实现简易购物车功能

    js实现简易购物车功能

    这篇文章主要为大家详细介绍了js实现简易购物车功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10
  • JavaScript 获取事件对象的注意点

    JavaScript 获取事件对象的注意点

    平时我们获取事件对象一定要将firefox考虑进去。
    2009-07-07
  • 利用ES6实现单例模式及其应用详解

    利用ES6实现单例模式及其应用详解

    单例是在程序设计非常基础的东西,这篇文章主要给大家介绍了关于利用ES6实现单例模式及其应用的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面随着小编来一起学习学习吧。
    2017-12-12

最新评论