如何通过Flask实现JavaScript与Python交互获取表单输入数据？

嘿，我来帮你搞定这个问题！既然你已经搭好了Flask框架，那把JavaScript里的表单数据传给Python其实没那么复杂——核心就是用AJAX请求把JSON格式的数据发送到Flask的后端接口，我给你一步步拆解实现步骤：

首先你需要在Flask里写一个能接收POST请求的接口，专门用来处理前端传过来的表单数据。因为你提到Python能读取JSON，所以我们让接口接收JSON格式的数据：

from flask import Flask, request, jsonify

app = Flask(__name__)

# 假设这是你已完成的分析函数
def analyze_user_data(name, email):
    # 这里写你的分析逻辑
    print(f"正在分析用户：{name}，邮箱：{email}")
    return {"status": "success", "message": f"已收到{name}的信息"}

@app.route('/api/submit-form', methods=['POST'])
def submit_form():
    # 获取前端传来的JSON数据
    user_data = request.get_json()
    
    # 提取姓名和邮箱（注意要和前端传的键名一致）
    name = user_data.get('name')
    email = user_data.get('email')
    
    # 调用你的分析函数
    result = analyze_user_data(name, email)
    
    # 返回响应给前端
    return jsonify(result)

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

接下来在你的HTML页面里，用JavaScript监听表单的提交事件，收集用户输入，然后把数据转成JSON发送给上面的Flask接口：

<!-- 你的表单HTML -->
<form id="userForm">
    <label for="name">姓名：</label>
    <input type="text" id="name" name="name" required>
    
    <label for="email">邮箱：</label>
    <input type="email" id="email" name="email" required>
    
    <button type="submit">提交</button>
</form>

<script>
// 获取表单元素
const form = document.getElementById('userForm');

// 监听表单提交事件
form.addEventListener('submit', async (e) => {
    // 阻止表单默认的刷新页面行为
    e.preventDefault();
    
    // 收集用户输入的数据，构建JSON对象
    const userData = {
        name: document.getElementById('name').value,
        email: document.getElementById('email').value
    };
    
    try {
        // 用fetch发送POST请求到Flask接口
        const response = await fetch('/api/submit-form', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json', // 告诉后端我们发的是JSON
            },
            body: JSON.stringify(userData) // 把JS对象转成JSON字符串
        });
        
        // 解析后端返回的响应
        const result = await response.json();
        console.log('提交成功：', result);
        alert('数据已提交！'); // 可以给用户一个反馈
    } catch (error) {
        console.error('提交失败：', error);
        alert('提交出错，请重试！');
    }
});
</script>

• 确保Flask接口的路由（/api/submit-form）和前端fetch的URL完全一致
• 前端请求的Content-Type必须设为application/json，否则Flask的request.get_json()会拿不到数据
• 如果你的Flask和前端页面不在同一个端口/域名，可能需要处理跨域问题（可以用Flask的flask-cors扩展解决）

现在你可以运行Flask应用，打开HTML页面，填写表单提交，就能看到后端控制台打印出用户的姓名和邮箱，你的分析函数也能拿到这些数据啦！

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