从FTP/本地目录读取JSON渲染HTML表格的技术咨询

1. 能否通过Ajax从FTP服务器读取JSON文件？ #

直接在浏览器端用Ajax无法读取FTP服务器的文件，因为浏览器的XMLHttpRequest（包括jQuery封装的Ajax方法）仅支持HTTP/HTTPS协议，不支持FTP协议。可行的解决方式有两种：

• 通过HTTP代理访问：将FTP服务器的JSON文件目录挂载到Web服务器（如Nginx、Apache），让JSON文件可以通过HTTP/HTTPS地址访问，之后前端就能用常规Ajax请求读取。
• 后端中转：用后端语言（如Node.js、PHP、Python）编写接口，后端程序通过FTP协议读取文件内容，再通过HTTP接口将JSON数据返回给前端，前端调用这个后端接口即可。

2. 支持自动上传JSON并提供访问URL的平台方案 #

推荐以下几种无需手动上传的方案：

• 云对象存储服务：主流云厂商的对象存储提供API接口，可通过脚本（如Shell、Python脚本）自动上传JSON文件，上传后可配置生成公开的HTTP访问链接。
• 代码托管平台Pages服务：将JSON文件存入GitHub/GitLab仓库，通过CI/CD流水线自动提交更新文件，然后利用Pages功能，通过固定域名访问仓库中的JSON文件。
• 自建简易上传接口：用Node.js或其他轻量后端框架搭建一个小接口，接收文件上传请求并返回访问URL，部署到云服务器或Serverless平台，之后通过脚本调用接口完成自动上传。

3. 读取同目录test.json无响应的解决步骤 #

按以下顺序排查并解决：

步骤1：验证文件基础信息 #

• 确认test.json与index.html在完全相同的目录，文件名大小写完全匹配（Linux服务器区分大小写，Windows不区分，但统一更稳妥）。
• 检查test.json的格式合法性：确保内容是标准JSON，比如示例对应的正确内容应为：

{"name":"Harry","age":14}

可直接用浏览器打开test.json查看是否能正常解析，或用在线JSON校验工具确认无语法错误。

步骤2：使用本地服务器运行项目 #

不能直接双击打开index.html（会触发file://协议，浏览器出于安全限制会阻止本地文件读取），必须通过本地HTTP服务器运行：

• Python3用户：在项目目录执行命令：

python -m http.server 8000

然后通过http://localhost:8000/index.html访问页面。

• Node.js用户：先全局安装http-server：

npm install -g http-server

再在项目目录执行：

http-server

访问控制台输出的本地地址即可。

步骤3：排查错误详情 #

修改代码的错误回调，获取更详细的错误信息：

$(document).ready(function(){
    $.getJSON("test.json", function(data){
        console.log(data.name);
        console.log(data.age);
    }).fail(function(jqXHR, textStatus, errorThrown) {
        console.log("错误状态: " + textStatus);
        console.log("错误详情: " + errorThrown);
        console.log("响应状态码: " + jqXHR.status);
    });
});

打开浏览器F12控制台，根据输出的错误信息定位问题（比如404表示文件找不到，parseerror表示JSON格式错误）。

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