Flask重定向后无效果前端无跳转无反应问题

在网上搜了一下并没有什么好的解决方案,有的话也只是告诉你如何修改代码,并没有讲明白其中的原理以及导致问题的核心,因此特意去了解了一下HTTP的规范找到了答案



  • 问题说明
    问题出现的流程大致都是前端发送Ajax请求给后端,进行一些查库校验等,这时根据逻辑进行重定向跳转到不同的页面,检查控制台可以显示,确实进行了路由的跳转,且跳转对象的函数内也可以执行相应的代码

可以发现DEBUG打印了302进行了重定向,且也进行了重定向后的路由跳转,但此时去看前端会发现并没有进行路由跳转
在这里插入图片描述



问题就出在请求方式这里,我的前端是通过AJAX的POST请求去发的,当我直接在浏览器进行输入路由进行测试时候可以发现重定向成功了(记得先让你的路由先支持GET方式),此时可能导致我误解是POST的原因,搜了相关资料确实说了POST会造成相关原因,但最后解决的核心点在AJAX



  • HTTP规范分析

HTTP/1.1规范规定,对于POST请求的重定向,浏览器的默认行为是不会自动地进行跳转的。这是为了防止用户无意中重复提交表单数据,因为POST请求通常用于提交表单。

在HTTP/1.1规范中,当服务器返回3xx状态码(重定向状态码)时,浏览器应该按照响应头中的Location字段的值进行重定向。然而,在实际应用中,对于POST请求,浏览器通常会将重定向的处理方式留给开发者来决定,而不会自动地执行。

对于GET请求,浏览器通常会遵循规范,自动进行重定向。但由于POST请求包含请求体(Request Body),而GET请求则不包含,因此在POST请求中,浏览器会要求开发者来处理重定向,以确保用户的数据安全。

所以,在处理POST请求的重定向时,开发者需要通过编写前端代码,通过JavaScript等手段来检测重定向,并根据需要手动执行跳转。



  • AJAX分析

使用 Ajax 进行异步请求时,浏览器并不会自动处理服务器端的重定向,因为 Ajax 请求通常用于在不刷新整个页面的情况下获取数据。由于这一点,即使服务器返回了重定向响应,浏览器也会在背后接收重定向,但不会自动更新页面。

所以,如果你希望在 Ajax 请求中进行重定向,你需要在前端代码中手动处理。可以通过在成功回调中手动设置 window.location.href 实现

如果你直接使用 <a> 标签或者表单提交的方式,浏览器会自动处理重定向,但使用 Ajax 时需要手动处理。这是因为 Ajax 的设计初衷是异步获取数据,而不是进行完整的页面导航



  • 总结

解决方案就是要么别用AJAX直接用a标签去做这个事儿,我这里要用Layui的表单去做校验,所以就得到JS层去做这个事。要么用AJAX的话就在前端进行重定向,后端这种前后端不分离的模板开发的方式都不会生效的,因为AJAX不会给你处理的,按照FLASK的处理方式,也是会将这个重定向的结果返回,也就是那个页面,但是因为是AJAX接收的,所以返回的结果会传递到回调函数中,这里你可以去打印一下AJAX的回调,可以发现返回了一个HTML页面的全部代码,也就是FLASK重定向后返回的东西。因此最后我是直接在前端进行重定向,跳转到目标页面,在目标页面渲染前做逻辑处理



  • 直接进行重定向后端
layui.use(function () {let form = layui.form;form.on('submit(search)', function (data) {let field = data.field;window.location.href = '{{ url_for('web.identify')}}' + `?code=${field.code}`;return false;});})
  • 后端路由去处理返回的数据以及HTML
@bp.route('/identify')
def identify():code = request.args.get('code')products = SecurityCode.query.filter_by(security_code=code).first()products_json = {'goods_name': products.goods_name,'security_code': products.security_code,'queries_num': products.queries_num} if products else Nonereturn render_template('identify.html', **locals())

自己根据情况合理调整即可,还是得多了解HTTP和AJAX的规则- -

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/236331.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【愚公系列】2023年12月 HarmonyOS教学课程 037-ArkUI事件(焦点事件)

&#x1f3c6; 作者简介&#xff0c;愚公搬代码 &#x1f3c6;《头衔》&#xff1a;华为云特约编辑&#xff0c;华为云云享专家&#xff0c;华为开发者专家&#xff0c;华为产品云测专家&#xff0c;CSDN博客专家&#xff0c;CSDN商业化专家&#xff0c;阿里云专家博主&#xf…

Flink电商实时数仓(三)

DIM层代码流程图 维度层的重点和难点在于实时电商数仓需要的维度信息一般是动态的变化的&#xff0c;并且由于实时数仓一般需要一直运行&#xff0c;无法使用常规的配置文件重启加载方式来修改需要读取的ODS层数据&#xff0c;因此需要通过Flink-cdc实时监控MySql中的维度数据…

相互独立的Gamma分布变量之和的分布

两个变量之和的情况 设随机变量相互独立&#xff0c;并且服从参数为的分布&#xff0c;记作&#xff1b;服从参数为的分布&#xff0c;记作&#xff0c;和的概率密度分别为&#xff1a; 其中 其中 那么随机变量服从参数为的分布&#xff0c;记作。 推广到n个变量之和的情况 …

云原生消息流系统 Apache Pulsar 在腾讯云的大规模生产实践

导语 由 InfoQ 主办的 Qcon 全球软件开发者大会北京站上周已精彩落幕&#xff0c;腾讯云中间件团队的冉小龙参与了《云原生机构设计与音视频技术应用》专题&#xff0c;带来了以《云原生消息流系统 Apache Pulsar 在腾讯云的大规模生产实践》为主题的精彩演讲&#xff0c;在本…

进阶之路:高级Spring整合技术解析

Spring整合 1.1 Spring整合Mybatis思路分析1.1.1 环境准备步骤1:准备数据库表步骤2:创建项目导入jar包步骤3:根据表创建模型类步骤4:创建Dao接口步骤5:创建Service接口和实现类步骤6:添加jdbc.properties文件步骤7:添加Mybatis核心配置文件步骤8:编写应用程序步骤9:运行程序 1.…

挑选知识付费平台不再迷茫:掌握这些技巧,轻松找到适合自己的平台!

明理信息科技知识付费平台 在当今的知识付费市场中&#xff0c;用户面临的选择越来越多&#xff0c;如何从众多知识付费平台中正确选择属于自己的平台呢&#xff1f;下面&#xff0c;我们将为您介绍明理信息科技知识付费平台相比同行的优势&#xff0c;帮助您做出明智的选择。…

Dubbo面试题及答案,持续更新

在准备Dubbo相关的面试题时&#xff0c;我发现网络上的资源往往缺乏深度和全面性。为了帮助广大Java程序员更好地准备面试&#xff0c;我花费了大量时间进行研究和整理&#xff0c;形成了这套Dubbo面试题大全。 这套题库不仅包含了一系列经典的Dubbo面试题及其详尽答案&#x…

雅思考试笔试还是机试,哪个更好,为什么?

想要参加或者即将参加雅思考试的同学们&#xff0c;你们知道雅思笔试和机试的有哪些相似点和不同点吗&#xff1f;下面由E趣少儿英语&#xff08;LUEnglish&#xff09;为您具体分析。 雅思纸笔考试与雅思机考&#xff1a;两者之间的相似之处 两个版本的雅思考试&#xff08;…

concat_ws()和college_list()配合=>实现多行转一行

concat_ws()&#xff1a; concat_ws()是“with separator”的缩写&#xff0c;它是一个用于连接字符串的函数。ws代表“with separator”&#xff0c;即带有分隔符。这个函数的作用是将多个字符串连接起来&#xff0c;并在它们之间插入指定的分隔符。语法&#xff1a;concat_ws…

2023 英特尔On技术创新大会直播 | 边云协同加速 AI 解决方案商业化落地

目录 前言边云协同时代背景边缘人工智能边缘挑战英特尔边云协同的创新成果最后 前言 最近观看了英特尔On技术创新大会直播&#xff0c;学到了挺多知识&#xff0c;其中对英特尔高级首席 AI 工程张宇博士讲解的边云协同加速 AI 解决方案商业化落地特别感兴趣。张宇博士讲解了英…

开源堡垒机JumpServer结合内网穿透实现远程访问

开源堡垒机JumpServer结合内网穿透实现远程访问 前言1. 安装Jump server2. 本地访问jump server3. 安装 cpolar内网穿透软件4. 配置Jump server公网访问地址5. 公网远程访问Jump server6. 固定Jump server公网地址 前言 JumpServer 是广受欢迎的开源堡垒机&#xff0c;是符合 …

网络安全:网络安全的技术趋势与发展

1.背景介绍 网络安全是现代信息化时代的重要问题之一&#xff0c;它涉及到计算机网络的安全性、数据的完整性、隐私保护等方面。随着互联网的不断发展&#xff0c;网络安全问题也日益复杂化。本文将从多个方面进行探讨&#xff0c;以帮助读者更好地理解网络安全的技术趋势与发…

spring依赖注入对象类型属性----外部bean的引入(bean和bean之间的引入)

文章目录 注入普通属性的方式1、set方法注入2、构造器&#xff08;构造方法&#xff09;注入 总结&#xff1a;注入对象类型属性 注入普通属性的方式 1、set方法注入 2、构造器&#xff08;构造方法&#xff09;注入 总结&#xff1a; set方法注入和构造器方法的注入&#…

Ansible自动化工具之Playbook剧本编写

目录 Playbook的组成部分 实例模版 切换用户 指定声明用户 声明和引用变量&#xff0c;以及外部传参变量 playbook的条件判断 ​编辑 习题 ​编辑 ansible-playbook的循环 item的循环 ​编辑 list循环 ​编辑 together的循环&#xff08;列表对应的列&#xff0…

【蓝桥杯一对一保奖辅导】国奖学姐蓝桥杯经验分享

目录 写在前面有关报名费如何准备&#xff1f;看书 /练习 /分类 /总结比赛技巧与指导 写在前面 蓝桥杯对于计算机专业相关的同学来说是非常值得参加的。 蓝桥杯相对于ACM比赛而言获奖难度较小&#xff0c;只要掌握技巧&#xff0c;拿到 省一甚至国奖是比较容易的&#xff0c;但…

Qt前端技术:3.QSS字体样式

small-caps就是让这个文本中的小写字母用大写的形式写出来并且在用大写的形式表达出来后他本身的大小会变小 有绝对尺寸和相对尺寸的区别 绝对尺寸一般是cm&#xff0c;英寸之类的 相对尺寸如px之类的是由显示器的屏幕分辨率来决定的 如windows用户分辨率一般是96像素点每英…

网络安全事件频发现状

近日&#xff0c;腾讯视频、菜鸟、滴滴等App崩溃的消息登上热搜&#xff0c;引发不少网友热议。今年以来&#xff0c;已有多起App崩溃事件发生&#xff0c;甚至有企业因此业绩损失超亿元。互联网应用的系统安全和稳定性建设越来越被社会广泛关注。 12月3日晚&#xff0c;有网友…

【力扣100】543.二叉树的直径

添加链接描述 # Definition for a binary tree node. # class TreeNode: # def __init__(self, val0, leftNone, rightNone): # self.val val # self.left left # self.right right class Solution:def __init__(self):self.max 0def diamete…

uniapp整合echarts(目前性能最优、渲染最快方案)

本文echarts示例如上图,可扫码体验渲染速度及loading效果,下文附带本小程序uniapp相关代码 实现代码 <template><view class="source

【python】在线代码混淆方案及注意事项

▒ 目录 ▒ &#x1f6eb; 导读开发环境 1️⃣ 在线网站pyob混淆操作步骤编写测试代码混淆转pyc缺点中文路径问题&#xff1a;python: Cant reopen .pyc file 2️⃣ 反编译python文件格式对比uncompyle6 3️⃣ 其它方案cpythonpython-obfuscatorPyInstaller【不推荐】pyminifie…