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>

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

赞 (0)

相关推荐

  • Springboot解决ajax+自定义headers的跨域请求问题

    1.什么是跨域 由于浏览器同源策略(同源策略,它是由Netscape提出的一个著名的安全策略.现在所有支持JavaScript 的浏览器都会使用这个策略.所谓同源是指,域名,协议,端口相同.),凡是发送请求url的协议.域名.端口三者之间任意一与当前页面地址不同即为跨域. 具体可以查看下表: 2.springboot如何解决跨域问题 1.普通跨域请求解决方案: ①请求接口添加注解@CrossOrigin(origins = "http://127.0.0.1:8020", maxAge

  • Flask框架踩坑之ajax跨域请求实现

    业务场景: 前后端分离需要对接数据接口. 接口测试是在postman做的,今天才开始和前端对接,由于这是我第一次做后端接口开发(第一次嘛,问题比较多)所以在此记录分享我的踩坑之旅,以便能更好的理解,应用. 问题: 前端ajax请求后端接口出现跨域问题,如下图. 翻译:因为响应头没有"Access-Control-Allow-Origin",所以接口拒绝把数据返回给前端. 什么是Access-Control-Allow-Origin? Access-Control-Allow-Origi

  • jquery实现Ajax请求的几种常见方式总结

    本文实例讲述了jquery实现Ajax请求的几种常见方式.分享给大家供大家参考,具体如下: 用原生的javascript开发ajax有着许多重复的代码,当然你也可以封装成可以复用的js代码,但却不一定那么通用.但jquery  提供的几种AJAX请求的几种方式,从简单到复杂,有更多的选择空间,下面总结几种在项目中常用的jquery ajax请求的方式,由于AJAX 与语言不相关,所以省略后台语言部分,重点放在前端. 1. 用jquery 的 load() 方法实现ajax请求 2. 用jquer

  • 在Web关闭页面时发送Ajax请求的实现方法

    在Web关闭页面时发送Ajax请求的实现方法

    前言 有时候我们需要在用户离开页面的时候,做一些上报来记录用户行为.又或者是发送服务器ajax请求,通知服务器用户已经离开,比如直播间内的退房操作. 本文主要分两部分来讲解怎么完成退出行为的上报. 1.事件监听 浏览器有两个事件可以用来监听页面关闭,beforeunload和unload. beforeunload是在文档和资源将要关闭的时候调用的, 这时候文档还是可见的,并且在这个关闭的事件还是可以取消的.比如下面这种写法就会让用户导致在刷新或者关闭页面时候,有个弹窗提醒用户是否关闭. win

  • jQuery实现ajax的嵌套请求案例分析

    本文实例讲述了jQuery实现ajax的嵌套请求.分享给大家供大家参考,具体如下: 今天看到了一个嵌套的ajax,算是长见识了. 不过看一眼就知道怎么回事了. 不是不会,就怕想不到. //发送一个ajax请求,嵌套的ajax请求 'ajaxCall': function(url1, data1, url2, data2){ var returnValue = ''; $.ajax({ type: "POST", url: url1, async: false, data: data1,

  • 详解Spring Boot 2.0.2+Ajax解决跨域请求的问题

    问题描述 后端域名为A.abc.com,前端域名为B.abc.com.浏览器在访问时,会出现跨域访问.浏览器对于javascript的同源策略的限制. HTTP请求时,请求本身会返回200,但是返回结果不会走success,并且会在浏览器console中提示: 已拦截跨源请求:同源策略禁止读取位于 https://www.baidu.com/ 的远程资源.(原因:CORS 头缺少 'Access-Control-Allow-Origin'). 解决方案 1.jsonp 2.引用A站的js 3.N

  • Ajax请求跨域问题解决方案分析

    本文实例讲述了Ajax请求跨域问题解决方案.分享给大家供大家参考,具体如下: 几乎每种浏览器都存在默认的安全机制,都有同源策略,因为浏览器恶意的把每个外部请求的都当做是黑客攻击,相当于是对自身的保护,所以浏览器在运行脚本时会判断脚本与请求的页面是否是同一来源,这个同一来源,包括1.协议,2.地址,3.端口,只有三者都相同才被认为是同一来源. 一.解决方案: 1,在服务器端的响应头中添加一个http参数: res.setHeader("Access-Control-Allow-Origin&quo

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

    前言 今天发现,当使用Ajax请求时,如果后台进行重定向到其他页面时是无法成功的,只能在浏览器地址栏输入才能够实现重定向. Ajax默认就是不支持重定向的,它是局部刷新,不重新加载页面. 需要实现的功能是,后台网关拦截请求,看请求中是否存在token.如果不存在就跳转到登录页面.因为大多数请求都是使用Ajax.一开始发现无法进行重定向,每次都是返回到Ajax的结果处理函数.最终的解决办法如下,需要后台和前端进行处理. 后台: /** *功能描述 * @author lgj * @Descript

  • JQuery发送ajax请求时中文乱码问题解决

    这篇文章主要介绍了JQuery发送ajax请求时中文乱码问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 先排除项目故障: 1.web.xml中是否配置了字符拦截器 <filter> <filter-name>encodingFilter</filter-name> <filter-class>org.springframework.web.filter.CharacterEncodingFilter

  • herf=#导致Ajax请求时没有向后台发送数据

    今天在做右键菜单,当点击重命名进行Ajax请求时,并没有向后台发送数据而是直接跳转到了首页.朕百思不得其解,后来在前台页面发现一个问题: 复制代码 代码如下: <span style="font-size:24px;"><li><a href='#' onclick="renameContactsFunction()">重命名</a></li></span> 原来就是这个herf='#'惹的祸.

  • 按钮的Ajax请求时一次点击两次提交的解决方法

    页面中的按钮的type是submit的: <input type="submit" value="Create" id="submit" /> ajax的请求,在JQuery中是: $(function () { $('#submit').click(function () { var createGenreForm = $('#createGenreForm'); if (createGenreForm.valid()) { var

  • Jquery ajax请求导出Excel表格的实现代码

    直接贴代码吧 $("#btn-export").click(function(){ var exportExcel = "export_excel"; dataParams[exportExcel] = 1; var params = $.param(dataParams); var url = host+"&"+params; $('<form method="post" action="' + ur

  • 使用FormData进行Ajax请求上传文件的实例代码

    Servlet3.0开始提供了一系列的注解来配置Servlet.Filter.Listener等等.这种方式可以极大的简化在开发中大量的xml的配置.从这个版本开始,web.xml可以不再需要,使用相关的注解同样可以完成相应的配置. a.选中上传 b:后台显示 c:上传的文件夹 html代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

  • jQuery Ajax 全局调用封装实例代码详解

    有一种情况:全站都要用异步方式来调用 数据,提交数据,那么你每次操作 都会要$.ajax({.....}) 写重复的方法 和代码,冗余太大, 也浪费时间,虽说你有代码自动提示补全,但真的不优雅,身为前端极客,是不能允许的! [嘿嘿!虽说我现在基本不用jquery了 ,不过异步概念 是永远要用的,就帮助下新人] jQuery Ajax通用js封装 第一步:引入jQuery库 <script type="text/javascript" src="/js/jquery.mi

  • Java编程Post数据请求和接收代码详解

    这两天在做http服务端请求操作,客户端post数据到服务端后,服务端通过request.getParameter()进行请求,无法读取到数据,搜索了一下发现是因为设置为text/plain模式才导致读取不到数据 urlConn.setRequestProperty("Content-Type","text/plain; charset=utf-8"); 若设置为以下方式,则通过request.getParameter()可以读取到数据 urlConn.setReq

  • Spring实现处理跨域请求代码详解

    一次正常的请求 最近别人需要调用我们系统的某一个功能,对方希望提供一个api让其能够更新数据.由于该同学是客户端开发,于是有了类似以下代码. @RequestMapping(method = RequestMethod.POST, value = "/update.json", produces = MediaType.APPLICATION_JSON_VALUE) public @ResponseBody Contacter update(@RequestBody Contacter

  • 使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解

    最近在做项目时,遇到了需要用到多选按钮选中触发事件的功能,因此我查找了一下AngularJS的提供的指令,但是没有发现相应的指令.而一个看起来很像的指令就是ng-checked,但是这个指令是用来代替标签里面checked属性的,所以也用不了.因此我就自己动手试着写一个这样的指令,相应的代码如下: <form name="test_form" ng-controller="TestCtrl"> <input type="checkbox&

随机推荐