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…

测试理论知识三:测试用例、测试策略

1.测试用例 完全的测试是不可能的&#xff0c;对任何程序的测试必定是不完全的&#xff0c;那么&#xff0c;最显然的测试策略就是努力使测试尽可能完全。 进行测试前&#xff0c;推荐先使用黑盒测试的方法设计测试用例&#xff0c;然后使用白盒测试方法来补充的测试用例。 2…

2023“楚怡杯”湖南省赛“信息安全管理与评估“--内存取证(高职组)

2023“楚怡杯”湖南省“信息安全管理与评估”(高职组)任务书 2023“楚怡杯”湖南省“信息安全管理与评估”(高职组)任务书第一阶段竞赛项目试题第二阶段竞赛项目试题第三部分 内存取证:需要环境私聊博主:2023“楚怡杯”湖南省“信息安全管理与评估”(高职组)任务书 第…

Flink电商实时数仓(三)

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

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

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

余弦距离和余弦相似度的区别

余弦相似度&#xff0c;就是计算两个向量间的夹角的余弦值&#xff1a;cosθ &#xff0c;取值范围 [-1,1] 。值越大&#xff0c;相似度越高 余弦距离就是用1减去这个获得的余弦相似度&#xff1a;1-cosθ &#xff0c;取值范围 [0,2] 。值越大&#xff0c;距离越远。 余弦距离…

为什么销售的强刺激政策不管用?

销售人员是联系企业生产与市场的纽带&#xff0c;是一个企业经济效益的直接创造者&#xff0c;他们对企业的贡献举足轻重&#xff0c;对销售人员的激励是否有效关系到整个企业的营销体系稳定与业绩提升。 因此&#xff0c;激励销售人员成为所有老总共同的愿望&#xff0c;甚至…

云原生消息流系统 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…

最新版android stuido加上namespace

每个 Android 模块都有一个命名空间&#xff0c;此命名空间用作其生成的 命名空间由模块的 build.gradle 文件中的 namespace 属性定义&#xff0c;如以下代码段所示。namespace 最初会设为您在创建项目时选择的软件包名称。 Kotlin Groovy android {namespace "com.ex…

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

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

【正点原子STM32连载】第十七章 通用定时器中断实验 摘自【正点原子】APM32E103最小系统板使用指南

第十七章 通用定时器中断实验 本章介绍APM32E103通用定时器的使用&#xff0c;通用定时器相较于基本定时器&#xff0c;拥有输入捕获和输出比较等功能&#xff0c;这些功能可以用来测量脉冲宽度、频率和占空比&#xff0c;并且可以产生并输出波形等。通过本章的学习&#xff0…

开源堡垒机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…