在Flask网页中显示服务器TXT文件内容的实现问题

嘿，我来帮你搞定这个问题！首先得明确：你用的是Flask（Python的Web框架），所以PHP的方式肯定行不通——Flask和PHP是完全不同的服务器环境，没法直接运行PHP代码。咱们用Flask原生的思路来解决，有两种简单好用的方案：

方案1：直接在模板里渲染TXT内容（最简单） #

不需要额外的JS脚本，直接在Flask路由里读取TXT文件，把内容传给模板，页面加载时就直接显示出来。

第一步：修改Flask的核心文件（比如app.py） #

from flask import Flask, render_template
import os

app = Flask(__name__)

@app.route('/')
def index():
    # 先定位到hello.txt的位置，这里假设文件在项目根目录
    txt_file_path = os.path.join(app.root_path, 'hello.txt')
    try:
        # 用utf-8编码读取文件，避免乱码
        with open(txt_file_path, 'r', encoding='utf-8') as file:
            txt_content = file.read()
    except FileNotFoundError:
        # 如果文件找不到，返回提示文本
        txt_content = "抱歉，文件不存在或无法读取"
    # 把内容传给模板
    return render_template('你的模板文件名.html', txt_content=txt_content)

if __name__ == '__main__':
    app.run(debug=True)

第二步：修改模板里的对应部分（第50行左右） #

把你原来的XHR或PHP代码替换成下面这段：

<div class="row">
    <div class="col-md-12">
        <h4>Rigidity Analysis</h4>
        <pre class="experimentRecord">{{ txt_content }}</pre>
    </div>
</div>

这样页面一加载，TXT文件的内容就直接显示在页面上了，省事又靠谱。

方案2：用AJAX动态加载（适合需要实时刷新的场景） #

如果你需要动态更新内容（比如TXT文件会被实时修改），可以用这种方式。核心是先给Flask加一个专门返回TXT内容的路由，再调整JS代码。

第一步：给Flask加新路由（app.py里添加） #

@app.route('/get-txt-content')
def get_txt_content():
    txt_file_path = os.path.join(app.root_path, 'hello.txt')
    try:
        with open(txt_file_path, 'r', encoding='utf-8') as file:
            # 返回文本内容，同时指定Content-Type为纯文本
            return file.read(), 200, {'Content-Type': 'text/plain'}
    except FileNotFoundError:
        # 文件找不到时返回错误提示和404状态码
        return "文件不存在或无法读取", 404

第二步：修改模板里的JS代码 #

你原来的XHR代码有两个小问题：一是要修改的元素没有id="demo"，二是直接请求文件路径可能不符合Flask的静态文件规则。修改后的代码如下：

<div class="row">
    <div class="col-md-12">
        <h4>Rigidity Analysis</h4>
        <!-- 给这个pre标签加一个id，方便JS定位 -->
        <pre class="experimentRecord" id="txt-content">{{ "test" }}</pre>
        <script type="text/javascript">
            // 页面加载完成后执行加载操作
            window.onload = function loadTxtContent() {
                var xhttp = new XMLHttpRequest();
                xhttp.onreadystatechange = function() {
                    if (this.readyState == 4 && this.status == 200) {
                        // 把获取到的文本内容插入到指定元素里
                        document.getElementById("txt-content").innerHTML = this.responseText;
                    } else if (this.readyState == 4 && this.status != 200) {
                        // 加载失败时显示错误信息
                        document.getElementById("txt-content").innerHTML = "加载失败：" + this.statusText;
                    }
                };
                // 请求我们刚加的Flask路由，而不是直接请求文件
                xhttp.open("GET", '/get-txt-content', true);
                xhttp.send();
            };
        </script>
    </div>
</div>

几个要注意的小细节 #

• 确认hello.txt的路径：如果你的文件放在Flask的static文件夹里，要把路径改成os.path.join(app.root_path, 'static', 'hello.txt')
• 开发时打开Flask的debug模式（app.run(debug=True)），这样能快速看到错误信息，方便排查问题
• 如果TXT文件里有中文或特殊字符，一定要用utf-8编码读取，避免出现乱码

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