如何通过网页按钮调用Python脚本并在页面展示输出结果

嘿，我明白你想实现点击网页按钮就能运行本地Python脚本scorecalculator.py，并把计算结果展示在页面上的需求～不过要注意哦：前端的HTML/JavaScript是没法直接调用本地Python脚本的，得搭个简单的后端服务做中间层，这里我用Flask给你举个最易懂的实现方案：

第一步：搭建Flask后端服务 #

首先得安装Flask框架，打开终端执行命令：

pip install flask

然后创建一个app.py文件，用来作为后端服务的入口：

from flask import Flask, jsonify
# 导入你的scorecalculator.py中负责计算分数的函数
# 假设你的脚本里计算分数的函数名叫calculate_score，记得替换成实际函数名
from scorecalculator import calculate_score

app = Flask(__name__)

# 定义一个接口，供前端调用获取分数
@app.route('/api/get-score', methods=['GET'])
def get_score():
    # 调用Python脚本中的计算函数得到结果
    score_result = calculate_score()
    # 将结果以JSON格式返回给前端
    return jsonify({'score': score_result})

if __name__ == '__main__':
    # 启动后端服务，允许本地前端页面访问
    app.run(host='0.0.0.0', port=5000, debug=True)

⚠️ 小提醒：如果你的scorecalculator.py之前是用print()输出结果，记得改成用return返回结果，这样后端才能拿到值并传给前端哦。

第二步：修改前端HTML代码 #

把你原来的changeText函数改成异步请求后端接口的版本，这样点击按钮时就能获取到Python脚本的计算结果：

<h2 class="calcscore"> This is your score: <b id='boldStuff'>score</b> </h2>
<input type='button' onclick='changeText()' value='Click for Score' />

<script>
async function changeText() {
    try {
        // 向后端接口发送请求，获取分数数据
        const response = await fetch('http://localhost:5000/api/get-score');
        const data = await response.json();
        // 更新页面上的分数显示
        document.getElementById('boldStuff').textContent = data.score;
    } catch (error) {
        // 如果请求出错，显示错误提示
        document.getElementById('boldStuff').textContent = '获取分数失败';
        console.error('请求出错：', error);
    }
}
</script>

第三步：运行测试 #

1. 先启动后端服务：在终端执行python app.py，看到服务启动成功的提示就ok啦
2. 直接打开你的HTML页面（本地文件即可）
3. 点击「Click for Score」按钮，就能看到scorecalculator.py返回的分数显示在页面上了！

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