Flask中点击按钮用fetch加载文本文件失效及app.js 404排查

一、app.js 404错误的原因 #

Flask对静态文件（JS、CSS、图片等）有固定目录要求，默认仅识别app/static目录下的静态资源。你的项目中app.js放在app/js目录，不属于Flask默认的静态文件路径；同时HTML里用相对路径js/app.js引用，当页面路由非根路径时，浏览器会请求错误地址（比如当前页面是/router/xxx，浏览器会请求/router/js/app.js），自然找不到文件。

解决步骤 #

1. 调整目录结构：在app目录下创建static文件夹，把js目录整体移入，最终路径为app/static/js/app.js。
2. 修正HTML脚本引用：用Flask的url_for函数生成正确的静态文件路径，替换原脚本标签：

   <script src="{{ url_for('static', filename='js/app.js') }}"></script>
   

   该方法会自动生成绝对路径，避免路由层级导致的路径错误。

二、按钮失效的原因及解决 #

按钮失效的直接原因是app.js未加载成功（404），导致点击事件未绑定到按钮上。即使解决静态文件问题，还需处理fetch请求路径及页面渲染逻辑：

1. 修复fetch请求路径 #

show_vlans文件放在项目根目录，Flask无法直接访问，有两种处理方式：

方式一：将文件移到静态目录

把show_vlans移到app/static目录，在HTML中给按钮添加存储请求地址的属性，避免硬编码路径：

<button id="button1" data-url="{{ url_for('static', filename='show_vlans') }}">Load vlan Data</button>

修改app.js的fetch逻辑：

document.getElementById('button1').addEventListener('click', loadTxt);

function loadTxt() {
    const url = document.getElementById('button1').dataset.url;
    fetch(url)
    .then(response => {
        if (!response.ok) throw new Error('请求失败');
        return response.text();
    })
    .then(text => {
        document.getElementById('result').textContent = text;
    })
    .catch(error => {
        console.error(error);
        document.getElementById('result').textContent = `加载失败：${error.message}`;
    });
}

方式二：添加视图函数返回文件内容

在routes.py中新增路由，专门返回show_vlans内容：

from flask import send_file
import os

@app.route('/show_vlan')
def get_vlan_data():
    # 拼接文件绝对路径
    file_path = os.path.join(os.path.dirname(os.path.abspath(__file__)), '../show_vlans')
    return send_file(file_path, mimetype='text/plain')

此时app.js中的fetch('show_vlan')可正确请求到内容，再补充上述渲染逻辑即可。

2. 补充页面渲染逻辑 #

原app.js仅打印响应对象，未将文件内容渲染到#result容器，所以即使请求成功页面也无变化。上述js代码已补充该逻辑，会把文件内容显示到页面，同时处理请求失败的情况。

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