如何在Flask中向Ajax传递文件路径以读取并展示文件内容？

看起来你遇到的核心问题是模板渲染的路径没有被正确解析成合法的JavaScript字符串，另外直接暴露静态文件路径还有安全隐患，我给你两种解决方案：

方案一：快速修复原代码（直接访问静态文件） #

你的JavaScript里var fileServer = '{{ data }}';存在两个潜在问题：

1. 如果路径中包含特殊字符（比如用户名里有空格、引号等），会直接导致JS语法错误
2. 模板渲染的字符串没有被正确转义成JS字符串格式

只需要把这一行改成用Flask的tojson过滤器，它会自动帮你处理字符串转义和引号：

var fileServer = {{ data|tojson }};

另外注意你Flask代码里的文件名拼接问题：current_user.username+'log.txt'会让用户名和log.txt直接连在一起（比如用户名为alice时，路径是/static/js/alicelog.txt），建议加上分隔符避免混淆：

filename = f'/static/js/{current_user.username}_log.txt'

方案二：更安全可靠的做法（通过后端路由返回日志） #

直接让前端访问静态文件路径有安全风险——任何知道路径的人都能访问该日志文件，哪怕不是对应用户。更好的方式是写一个专门的Flask路由，验证用户身份后再返回日志内容：

1. 修改Flask代码，添加日志路由 #

from flask import abort
import os

@app.route('/get-user-log')
def get_user_log():
    # 验证用户是否已登录
    if not current_user.is_authenticated:
        abort(403)  # 返回禁止访问状态码
    
    # 构建日志文件路径（添加下划线分隔符）
    log_file_path = f'/static/js/{current_user.username}_log.txt'
    
    # 检查文件是否存在
    if not os.path.exists(log_file_path):
        abort(404)  # 返回文件不存在状态码
    
    # 读取并返回日志内容
    with open(log_file_path, 'r', encoding='utf-8') as f:
        log_content = f.read()
    return log_content, 200, {'Content-Type': 'text/plain'}

2. 修改前端JavaScript代码 #

不需要再传递文件路径，直接请求这个路由即可：

var checkInterval = 1; // seconds
var logApiUrl = '/get-user-log';
var lastData;

function checkFile() {
    $.get(logApiUrl, function (data) {
        if (lastData !== data) {
            $("#target").val(data);
            $("#target").animate({
                scrollTop: $("#target")[0].scrollHeight - $("#target").height()
            }, 'slow');
            lastData = data;
        }
    }).fail(function() {
        // 处理请求失败的情况（比如未登录、文件不存在）
        console.error('无法加载日志文件，请检查登录状态或文件是否存在');
    });
}

$(document).ready(function () {
    setInterval(checkFile, 1000 * checkInterval);
});

为什么推荐方案二？ #

• 安全性高：只有登录的用户能访问自己的日志，不会泄露其他用户的日志路径
• 容错性强：可以在后端处理文件不存在、用户未登录等异常情况，返回明确的状态码
• 维护性好：日志文件的存储路径可以在后端统一修改，不需要改动前端代码

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