如何通过Flask在Python脚本中获取HTML表单输入数据

嘿，我来帮你搞定这个问题！你有个HTML页面能收集team1、team2和match_id，想点击按钮把这些数据传给Python机器学习脚本对吧？用Flask做后端是个简单高效的方案，我给你一步步拆解：

1. 调整你的HTML表单（让它能正确发送数据） #

首先把你的HTML补全成带表单的结构，用AJAX提交可以避免页面刷新，用户体验更好。我给你补全后的代码：

<!DOCTYPE html>
<html>
<head>
    <title>Criclytics</title>
    <link rel="stylesheet" href="bootstrap.min.css">
    <script src="jquery.min.js"></script>
    <script src="bootstrap.min.js"></script>
    <style type="text/css">
        @import url(http://fonts.googleapis.com/css?family=Exo:100,200,400);
        @import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:700,400,300);
        /* 保留你的原有样式 */
    </style>
</head>
<body>
    <div class="container mt-5">
        <h2>Criclytics Match Predictor</h2>
        <form id="predictForm">
            <div class="mb-3">
                <label for="team1" class="form-label">Team 1</label>
                <input type="text" class="form-control" id="team1" name="team1" required>
            </div>
            <div class="mb-3">
                <label for="team2" class="form-label">Team 2</label>
                <input type="text" class="form-control" id="team2" name="team2" required>
            </div>
            <div class="mb-3">
                <label for="match_id" class="form-label">Match ID</label>
                <input type="text" class="form-control" id="match_id" name="match_id" required>
            </div>
            <button type="submit" class="btn btn-primary" id="predictBtn">Predict</button>
        </form>
        <!-- 用来显示预测结果的区域 -->
        <div id="result" class="mt-3"></div>
    </div>

    <script>
        // 用AJAX提交表单，阻止默认刷新行为
        $('#predictForm').submit(function(e) {
            e.preventDefault();
            // 收集表单数据
            const formData = {
                team1: $('#team1').val(),
                team2: $('#team2').val(),
                match_id: $('#match_id').val()
            };

            // 发送请求到后端接口
            $.ajax({
                type: 'POST',
                url: '/predict',
                data: formData,
                success: function(response) {
                    // 把后端返回的预测结果显示出来
                    $('#result').html(`<h4 class="alert alert-success">预测结果：${response.prediction}</h4>`);
                },
                error: function() {
                    $('#result').html('<div class="alert alert-danger">预测出错啦，请重试</div>');
                }
            });
        });
    </script>
</body>
</html>

关键要点：给每个输入框加了name属性（后端靠这个拿值），用AJAX异步提交数据，还加了结果展示区域。

2. 搭建Flask后端（接收数据+调用机器学习脚本） #

Flask是轻量级的Python Web框架，特别适合这种小场景。

第一步：安装Flask #

打开终端运行：

pip install flask

第二步：写后端代码（保存为app.py） #

from flask import Flask, request, jsonify

# 导入你的机器学习脚本，假设你的模型逻辑在ml_model.py里
import ml_model

app = Flask(__name__)

# 定义接收预测请求的接口
@app.route('/predict', methods=['POST'])
def predict():
    # 获取前端传过来的三个参数
    team1 = request.form.get('team1')
    team2 = request.form.get('team2')
    match_id = request.form.get('match_id')

    # 调用你的机器学习预测函数（这里要改成你自己的函数名和逻辑）
    prediction_result = ml_model.predict_match(team1, team2, match_id)

    # 返回JSON格式的结果给前端
    return jsonify({'prediction': prediction_result})

if __name__ == '__main__':
    # 启动服务，debug=True方便开发时调试（生产环境要关掉）
    app.run(debug=True)

第三步：你的机器学习脚本示例（保存为ml_model.py） #

这部分替换成你自己的模型逻辑就行，下面是个模拟示例：

def predict_match(team1, team2, match_id):
    # 这里写你的真实逻辑：加载模型、处理输入、运行预测
    # 示例返回一个模拟结果
    return f"{team1} 获胜概率：62% | {team2} 获胜概率：38% | 赛事ID：{match_id}"

3. 运行和测试 #

1. 把HTML文件放到templates文件夹里（Flask默认从这个文件夹找模板）
2. 把app.py和ml_model.py放在和templates同级的目录下
3. 终端运行python app.py，然后打开浏览器访问http://localhost:5000
4. 输入三个值，点击Predict按钮，就能看到你的机器学习模型返回的结果啦！

额外注意事项 #

• 如果你的模型很大，加载时间长，建议在Flask启动时提前加载模型，不要每次请求都重新加载，提升效率
• 生产环境不要用debug=True，可以改用Gunicorn这类生产服务器
• 可以加一些输入验证逻辑，比如检查队名是否合法、match_id是否为有效数字，避免无效数据导致模型出错

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