如何在HTML、CSS、JS搭建的网站中调用Python文件的计算结果

你要实现的是典型的前后端HTTP交互流程，前端收集用户输入后发送请求给Python后端，后端完成自定义运算后返回结果，前端再将结果渲染到页面上即可，具体实现步骤如下：

1. 搭建Python后端接口 #

推荐使用轻量的Flask框架快速搭建接口，无需复杂配置就能快速跑通流程：

• 首先安装依赖包：pip install flask flask-cors，安装flask-cors是为了解决本地调试时前端、后端端口不同导致的跨域报错。
• 后端示例代码：

from flask import Flask, request, jsonify
from flask_cors import CORS

app = Flask(__name__)
# 本地调试可开启全量跨域，生产环境建议配置为你的前端域名
CORS(app)

# 定义处理计算逻辑的接口，接收POST请求
@app.route('/calculate', methods=['POST'])
def calculate():
    # 解析前端传递的JSON格式数据
    data = request.get_json()
    # 这里替换为你自己的运算逻辑，示例为把输入值乘2
    user_input = data.get('user_input', 0)
    final_result = user_input * 2
    # 以JSON格式返回计算结果
    return jsonify({
        "code": 200,
        "result": final_result
    })

if __name__ == '__main__':
    # 后端默认启动在5000端口，debug模式开启后修改代码会自动重启
    app.run(port=5000, debug=True)

2. 前端页面实现 #

前端需要包含用户输入区域、提交按钮、结果展示区域，以及发送请求的JS逻辑：

• 完整页面示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>计算演示</title>
</head>
<body>
    <div class="input-area">
        <label>请输入需要计算的数值：</label>
        <input type="number" id="userInput" placeholder="请输入内容">
        <button id="submitBtn">提交计算</button>
    </div>
    <div class="result-area">
        <p>计算结果：<span id="resultText"></span></p>
    </div>

    <script>
        // 绑定提交按钮点击事件
        document.getElementById('submitBtn').addEventListener('click', async () => {
            const inputVal = Number(document.getElementById('userInput').value)
            try {
                // 发送POST请求到后端接口
                const res = await fetch('http://127.0.0.1:5000/calculate', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        user_input: inputVal
                    })
                })
                const data = await res.json()
                if(data.code === 200) {
                    // 将计算结果渲染到页面上
                    document.getElementById('resultText').textContent = data.result
                }
            } catch (err) {
                console.error('请求异常：', err)
            }
        })
    </script>
</body>
</html>

3. 运行测试 #

• 先运行你的Python后端文件，终端执行命令python 你的后端文件名.py，确认后端5000端口正常启动
• 再打开前端HTML页面，输入内容点击提交按钮，即可看到后端返回的计算结果

注意事项 #

• 生产环境部署时需要关闭Flask的debug模式，同时限制CORS的允许域名，不要开启全量跨域避免安全风险
• 如果你的运算逻辑复杂度高、依赖多，也可以用FastAPI替代Flask，性能更高，语法差异很小
• 前后端都要添加参数校验逻辑，避免非法输入导致程序报错

内容的提问来源于stack exchange，提问作者Ives Brandão