Flask切换按钮迁移至项目后失效，求助排查原因

问题背景 #

接触Flask仅一周，参考相关问题实现了带动态标签的toggle按钮，测试环境功能正常，但迁移到实际项目的HTML文件后无法工作，推测脚本未被触发，附上相关代码寻求排查方向。

核心排查点 #

• 修复HTML结构错误：当前HTML在{% block body %}内嵌套了完整的<html><head><body>标签，而继承的header.html应该已经包含这些基础结构。重复的根标签会导致浏览器DOM解析混乱，脚本和样式无法正常生效。需将toggle相关的资源引入、元素和脚本移到正确的模板块中（比如{% block content %}或专门的脚本块），移除多余的<html><head><body>。

• 验证静态资源加载：打开浏览器开发者工具（F12）→ Network标签，检查jQuery、Bootstrap及Bootstrap Toggle的CSS/JS是否加载成功（状态码200）。若出现404，确认CDN链接是否有效，或替换为稳定的CDN资源。

• 检查脚本执行与元素选择：

  1. 在浏览器Console标签查看是否有JS错误（比如$ is not defined说明jQuery未加载，或元素选择器找不到目标）；
  2. 给脚本中的console.log("here")增加更明确的输出，比如console.log("toggle clicked", $('.toggle').length)，确认是否能选中toggle元素；
  3. Bootstrap Toggle需要正确初始化，确保在jQuery加载完成后再调用相关逻辑，避免初始化顺序问题。

• 确认Flask路由有效性：

  1. 检查app.py中toggled_status路由是否正确注册，无拼写错误（注意路由中的/Planning/前缀是否与项目的URL结构匹配，若使用蓝图需确认蓝图前缀设置）；
  2. 直接在浏览器地址栏访问http://你的域名/Planning/get_toggled_status?status=Toggled，查看是否能返回预期的Untoggled，验证路由是否正常响应。

• 优化AJAX请求路径：避免硬写URL路径，改用Flask的url_for生成正确路径，确保部署环境下路径一致。修改脚本中的AJAX URL为：

  url: "{{ url_for('toggled_status') }}"
  

  注意需将这段JS代码放在模板块内，让Flask能解析模板变量。

相关代码 #

HTML模板 #

{% extends "header.html" %}

{% block body %}
<h2>{{ mType }}</h2>
{% if rType == "Test"%}
    <h3>Test</h3>
{% endif %}

{% block content %}
<div class="row">
  <div class="col-md-4">{% include "safetychanges.html" %}</div>
  <div class="col-md-8">
      <div id="load3" class="load3">
          <form method="post" action="{{ url_for('tasks') }}">
            <input type="submit" value="Start/Stop Recording" name="rec" />
            </form>
        <div class="container">
    <div class="row">
        <div class="col-12 d-flex justify-content-end">
            <form method="post" action="{{ url_for('tasks') }}">
            </form>
            <img src="{{ url_for('video_feed') }}" height="100%" width="100%">
        </div>
    </div>
</div>
    </div>
  </div>
</div>

<!-- 移到content块内，移除多余的html/head/body标签 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>

<input type="checkbox" class='toggle' checked data-toggle="toggle">
<div class='status'>Toggled</div>

<script>
 $(document).ready(function() {
  $('.toggle').click(function() {
   var current_status = $('.status').text();
   console.log("toggle clicked, current status:", current_status);
   $.ajax({
    url: "{{ url_for('toggled_status') }}",
    type: "get",
     data: {status: current_status},
     success: function(response) {
      $(".status").html(response);
     },
     error: function(xhr) {
      console.error("AJAX error:", xhr.statusText);
     }
   });
  });
});
</script>
{% endblock %}
{% endblock %}

app.py路由 #

from flask import request

@app.route('/Planning/get_toggled_status')
def toggled_status():
  current_status = request.args.get('status')
  print("Received status:", current_status)
  return 'Toggled' if current_status == 'Untoggled' else 'Untoggled'

内容的提问来源于stack exchange，提问作者Bob