新手技术咨询：如何利用服务器返回的JSON在HTML中输出（含Python场景）

嘿，作为HTML新手，这个需求其实很好实现，咱们分几步来拆解清楚：

首先要明确：HTML不能直接启动Python脚本，得先把你的Python脚本做成一个可以提供JSON数据的后端服务，然后前端HTML通过JavaScript发送HTTP请求，拿到这个JSON数据后再渲染到页面上。

如果你还没接触过后端框架，Flask绝对是新手友好的选择，咱们来写个最简单的例子：

1. 先安装Flask：打开终端，运行 pip install flask
2. 写Python脚本（比如叫app.py）：

from flask import Flask, jsonify

app = Flask(__name__)

# 这里模拟你的脚本生成JSON的逻辑，替换成你实际的代码就行
@app.route('/get-json-data')
def return_json():
    # 假设你的脚本执行后返回这个JSON对象
    your_json_data = {
        "username": "tomak",
        "favorite_languages": ["Python", "HTML", "JavaScript"],
        "total_repos": 5
    }
    return jsonify(your_json_data)

# 同时可以让Flask直接返回你的HTML页面（避免跨域问题）
@app.route('/')
def show_html():
    return open('index.html').read()

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

创建一个index.html文件，和app.py放在同一个文件夹里：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>显示服务器返回的JSON</title>
    <style>
        /* 加一点点样式，让页面好看点 */
        #data-container {
            margin: 20px;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 8px;
        }
        pre {
            background-color: #f5f5f5;
            padding: 10px;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <h1>从Python服务器获取的JSON数据</h1>
    <div id="data-container"></div>

    <script>
        // 用现代的fetch API请求后端的JSON接口
        fetch('/get-json-data')
            .then(response => {
                // 先检查请求是否成功
                if (!response.ok) {
                    throw new Error(`服务器返回错误：${response.status}`);
                }
                // 把响应转换成JSON格式
                return response.json();
            })
            .then(jsonData => {
                const container = document.getElementById('data-container');
                
                // 方式1：直接显示格式化后的JSON字符串（适合调试）
                container.innerHTML = `<pre>${JSON.stringify(jsonData, null, 2)}</pre>`;

                // 方式2：自定义渲染成美观的HTML结构（推荐给用户看）
                // let htmlContent = `<p>用户名：<strong>${jsonData.username}</strong></p>`;
                // htmlContent += `<p>喜欢的编程语言：</p><ul>`;
                // jsonData.favorite_languages.forEach(lang => {
                //     htmlContent += `<li>${lang}</li>`;
                // });
                // htmlContent += `</ul><p>仓库总数：${jsonData.total_repos}</p>`;
                // container.innerHTML = htmlContent;
            })
            .catch(error => {
                // 请求失败时显示错误信息
                document.getElementById('data-container').textContent = `获取数据失败：${error.message}`;
            });
    </script>
</body>
</html>

1. 打开终端，进入app.py所在的文件夹，运行 python app.py
2. 打开浏览器，访问 http://localhost:5000，你就能看到页面上显示出Python返回的JSON数据啦！

• 如果你不想用Flask，也可以用其他Python框架（比如Django），或者甚至用Python的http.server模块写个简单的后端，但Flask是最省心的选择。
• 如果你直接打开本地的index.html（用file://协议）去请求后端，可能会遇到跨域问题，所以上面的例子让Flask直接返回HTML页面，这样前端和后端同域，就不会有这个问题。
• 你只需要把Python脚本里的your_json_data替换成你实际脚本生成的JSON内容就行，比如调用你的脚本函数获取数据。

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