如何用JavaScript读取服务器已有TXT文件并在页面交互展示？

前端JS受安全限制无法直接读取服务器本地文件，必须通过HTTP请求获取，以下是具体实现：

1. 页面结构（index.html） #

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>加载服务器文件</title>
</head>
<body>
    <button id="loadBtn">点击加载文件内容</button>
    <div id="contentBox" style="margin-top: 20px; padding: 12px; border: 1px solid #eee; min-height: 50px;"></div>

    <script src="app.js"></script>
</body>
</html>

2. JS逻辑（app.js） #

用fetch API发起请求，点击按钮时触发内容加载：

document.getElementById('loadBtn').addEventListener('click', async () => {
    const contentBox = document.getElementById('contentBox');
    try {
        // 请求服务器上的example.txt文件，路径根据实际位置调整
        const res = await fetch('./example.txt');
        if (!res.ok) throw new Error(`请求错误：${res.status}`);
        const textContent = await res.text();
        contentBox.textContent = textContent;
    } catch (err) {
        contentBox.textContent = `加载失败：${err.message}`;
    }
});

关键注意点 #

• 必须在服务器环境运行项目，不能直接用file://协议打开HTML（会触发安全限制）。可以用工具快速搭建本地服务器，比如Node.js的http-server（执行npx http-server启动），或者用Apache、Nginx等。
• 确保example.txt和页面文件在服务器的对应路径下，若文件在子目录，修改fetch的URL即可（比如./files/example.txt）。

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