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

news2024/11/16 8:16:39

在网上搜了一下并没有什么好的解决方案,有的话也只是告诉你如何修改代码,并没有讲明白其中的原理以及导致问题的核心,因此特意去了解了一下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 None
    return render_template('identify.html', **locals())

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

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

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

相关文章

redis 7.2.3 官方配置文件 redis.conf sentinel.conf

文章目录 Intro解压配置使用等官方配置文件模板redis.conf 仅配置项redis.conf 完整版(配置项注释)sentinel.conf 仅配置项sentinel.conf 完整版(配置项注释) Intro 在下载页面&#xff1a;https://redis.io/download/ 下载最新版本的redis&#xff1a; https://github.com/re…

K8s攻击案例:RBAC配置不当导致集群接管

01、概述 Service Account本质是服务账号&#xff0c;是Pod连接K8s集群的凭证。在默认情况下&#xff0c;系统会为创建的Pod提供一个默认的Service Account&#xff0c;用户也可以自定义Service Account&#xff0c;与Service Account关联的凭证会自动挂载到Pod的文件系统中。 …

xxl-job 分布式调度学习笔记

1.概述 1.1什么是任务调度 业务场景&#xff1a; 上午10点&#xff0c;下午2点发放一批优惠券 银行系统需要在信用卡到期还款日的前三天进行短信提醒 财务系统需要在每天凌晨0:10分结算前一天的财务数据&#xff0c;统计汇总 不同系统间的数据需要保持一致&#xff0c;这时…

【论文解读】Comparing VVC, HEVC and AV1 using Objective and Subjective Assessments

时间&#xff1a;2020 级别&#xff1a;IEEE 机构&#xff1a; IEEE 组织 摘要&#xff1a; 对3种最新的视频编码标准HEVC (High Efficiency video Coding)测试模型HM (High Efficiency video Coding)、amedia video 1 (AV1)和Versatile video Coding测试模型 (VTM)进行了客观和…

MCU为什么上电不启动?

都遇到过这样的问题吧&#xff0c;自信满满的把程序下载到板子上&#xff0c;结果发现MCU居然没启动。 出现这个问题有很多原因&#xff0c;总结为以下五点&#xff1a; 第一&#xff0c;boot引脚电平不对&#xff0c;例如在GD32的MCU上&#xff0c;boot引脚决定了MCU的启动方式…

CentOS 8离线安装telnet

下载telnet rpm安装包&#xff0c;可从https://www.rpmfind.net/linux/rpm2html/search.php?querytelnet&submitSearch…&systemcentos&arch 根据自己的操作系统下载对应的包&#xff0c;这里以CentOS8为例,分别下载如下的rtp包 xinetd-2.3.15-24.el8.x86_64.rpm…

ansible模块 (7-13)

模块 7、hostname模块&#xff1a; 远程主机名管理模块 ansible 192.168.10.202 -m hostname -a nameliu 8、copy模块&#xff1a; 用于复制指定的主机文件到远程主机的模块 常用参数&#xff1a; dest: 指出要复制的文件在哪&#xff0c;必须使用绝对路径。如果源目标是…

需求:通过按钮的点击事件控制另一个输出框/按钮的点击

目录 第一章 接到需求 第二章 了解需求 第三章 解决需求 第四章 优化代码 第五章 解决问题 第一章 接到需求 最近开发的时候遇到这么一个事&#xff0c;技术经理是个全栈&#xff0c;已经把接口生成了&#xff0c;而且前端页面也写好了一个初稿&#xff0c;操作什么的功…

MySQL数据库——SQL语法

Structured Query Language&#xff08;结构化查询语言&#xff09;&#xff0c;简称SQL&#xff0c;是用于操作关系型数据库的标准编程语言。SQL提供了一种与数据库交互的方式&#xff0c;可以用于查询、插入、更新和删除数据库中的数据。 1. SQL通用语法 SQL语句可以写在一…

【PID学习笔记11】连续系统的数字PID

写在前面 从本文开始将一块学习数字PID控制及其MATLAB仿真。本文重点介绍连续系统的数字PID控制仿真。 一、数字PID总览 基于刘金琨编著的《先进PID控制MATLAB仿真&#xff08;第4版&#xff09;》参考文献内容&#xff0c;我们一起学习以下数字式PID控制。 二、连续系统的…

c 实现jpeg中的ALI(可变长度整数转换)正反向转换

用于DC的ALI表&#xff1a;DIFF 就是前后两个8X8块DC的差值&#xff0c;ssss就是DIFF值用二进制表示的位数 亮度&#xff0c;与色度的DC都是这种处理的。两个相邻的亮度与亮度比差&#xff0c;色度与色度比差产生DIFF, 扫描开始DIFF等于0。 用于AC ALI表&#xff1a;表中的AC…

Leetcode—16.最接近的三数之和【中等】

2023每日刷题&#xff08;六十四&#xff09; Leetcode—16.最接近的三数之和 实现代码 class Solution { public:int threeSumClosest(vector<int>& nums, int target) {sort(nums.begin(), nums.end());int s 0;int diff INT_MAX / 2;int n nums.size();int a…

宣布推出 ML.NET 3.0

作者&#xff1a;Jeff Handley 排版&#xff1a;Alan Wang ML.NET 是面向 .NET 开发人员的开源、跨平台的机器学习框架&#xff0c;可将自定义机器学习模型集成到 .NET 应用程序中。ML.NET 3.0 版本现已发布&#xff0c;其中包含大量新功能和增强功能&#xff01; 此版本中的深…

比 style gan 更好的 style gan2

上一篇博客介绍了style gan 原理&#xff0c;但是 style gan 的结果会有水珠伪影&#xff0c;作者实验后发现是 Adain 导致的&#xff0c;AdaIN对每一个feature map的通道进行归一化&#xff0c;这样可能破坏掉feature之间的信息。当然实验证明发现&#xff0c;去除AdaIN的归一…

轻量级购物小程序H5产品设计经典样例

主要是看到这个产品设计的不错值得借鉴特记录如下&#xff1a; 不过大多数购物app都大致相同&#xff0c;这个算是经典样例&#xff0c;几乎都可以复制&#xff0c;我第一次使用&#xff0c;感觉和顺畅。看上去产品是经过打磨的&#xff0c;布局非常好。内容也很丰富。支持异业…

SpringCloud 分布式事务

一.介绍 首先我们看一个项目中的下单业务整体流程&#xff1a; 由于订单、购物车、商品分别在三个不同的微服务&#xff0c;而每个微服务都有自己独立的数据库&#xff0c;因此下单过程中就会跨多个数据库完成业务。而每个微服务都会执行自己的本地事务&#xff1a; 交易服务&…

uniapp-安卓APP开发时使用手机调试

调试 1. 手机打开开发者模式: 华为手机举列-->设置-->关于手机-->版本号&#xff0c;多次连续点击“版本号”&#xff0c;就会提示已打开开发者模式 2. 华为手机举列-->设置-->系统和更新-->开发人员选项-->打开 USB调试&#xff0c;进入调试模式 3. 先…

路由器设置代理IP教程,http代理怎么固定IP地址?

路由器设置代理IP教程 一、确定代理IP地址 首先&#xff0c;你需要确定你要使用的代理IP地址。你可以从代理服务提供商处获取代理IP地址和端口号。 二、登录路由器管理界面 在浏览器中输入路由器的IP地址&#xff0c;输入账号和密码&#xff0c;进入路由器的管理界面。 三、设置…

k8s集群1.23.0版本部署说明

1.部署 k8s1.23.0版本与1.26.0版本的部署基本差不多&#xff0c;只不过k8s 1.23版本不需要部署cri-docker&#xff0c;所以只需要在1.26.0版本部署的基础上不要cri-docker的部署即可 参考&#xff1a;kubeadm部署k8s 1.26.0版本高可用集群_kubeadm 高可用集群-CSDN博客 搭建…