Ajax請求時無法重定向的問題解決代碼詳解
前言
今天發(fā)現(xiàn),當(dāng)使用Ajax請求時,如果后臺進(jìn)行重定向到其他頁面時是無法成功的,只能在瀏覽器地址欄輸入才能夠?qū)崿F(xiàn)重定向。
Ajax默認(rèn)就是不支持重定向的,它是局部刷新,不重新加載頁面。
需要實現(xiàn)的功能是,后臺網(wǎng)關(guān)攔截請求,看請求中是否存在token.如果不存在就跳轉(zhuǎn)到登錄頁面。因為大多數(shù)請求都是使用Ajax.一開始發(fā)現(xiàn)無法進(jìn)行重定向,每次都是返回到Ajax的結(jié)果處理函數(shù)。最終的解決辦法如下,需要后臺和前端進(jìn)行處理。
后臺:
/** *功能描述 * @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 { //這里并不是設(shè)置跳轉(zhuǎn)頁面,而是將重定向的地址發(fā)給前端,讓前端執(zhí)行重定向 //設(shè)置跳轉(zhuǎn)地址 response.setHeader("redirectUrl", redirectUrl); //設(shè)置跳轉(zhuǎn)使能 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) }, //請求完成調(diào)用 (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 方法,代碼復(fù)用率低。
第二種方法 : 使用全局的complete方法
ajax請求
$("#NON-TOKEN").click(function () { $.ajax({ type: "post", url: "/auth/token/check", success: function(data,status){ console.log("/token/check 返回 status : "+status) }, });
全局處理
注意這參數(shù)(event, xhr, settings)不能少,否則會報錯。
//每一個Ajax 請求完成之后都會執(zhí)行。 $(document).ajaxComplete(function (event, xhr, settings) { console.log("ajaxComplete ") redirectHandle(xhr); })
function redirectHandle(xhr) { //獲取后臺返回的參數(shù) 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文件中,在需要進(jìn)行重定向的時候引入即可,便可以實現(xiàn)更高的代碼復(fù)用率。
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根據(jù)據(jù)實際情況設(shè)置。
<script src="/common/redirect.js"></script>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript通過HTML的class來獲取HTML元素的方法總結(jié)
除了getElementsByClassName()函數(shù),我們可以自己動手編寫程式來通過class獲取元素,接下來我們整理了一下JavaScript通過HTML的class來獲取HTML元素的方法總結(jié),需要的朋友可以參考下2016-05-05javascript通過class來獲取元素實現(xiàn)代碼
javascript獲取元素有很多的方法,本文簡單的介紹下通過class獲取元素的實現(xiàn)代碼,感興趣的朋友可以參考下,希望本文知識點可以幫助到你2013-02-02微信web端后退強(qiáng)制刷新功能的實現(xiàn)代碼
這篇文章主要介紹了微信web端后退強(qiáng)制刷新功能的實現(xiàn)代碼,需要的朋友可以參考下2018-03-03javascript 小數(shù)取整簡單實現(xiàn)方式
這篇文章主要介紹了javascript 小數(shù)取整d的簡單實現(xiàn)方式,需要的朋友可以參考下2014-05-05