基于Flask校园Web项目：如何从JavaScript向Python传递数据？

嘿，我来帮你搞定这个问题！在Flask校园项目里把JavaScript变量传到Python后端，其实有几种实用且常用的方法，我给你一步步拆解清楚：

这是最灵活的方案，不用刷新页面就能完成数据传递，适配绝大多数交互场景。

前端JavaScript代码 #

假设你有个要传递的JS变量campusInfo：

// 你要传递的JS变量
const campusInfo = {
    studentId: "2023001",
    major: "软件工程",
    grade: 3
};

// 用Fetch发送POST请求到后端路由
fetch('/send-student-data', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
    },
    body: JSON.stringify(campusInfo), // 把JS对象转成JSON字符串
})
.then(response => response.json())
.then(data => {
    console.log('后端返回的响应:', data);
    // 这里可以加前端提示，比如弹窗告知用户数据提交成功
})
.catch((error) => {
    console.error('请求出错啦:', error);
});

后端Flask代码 #

你需要新增一个接收POST请求的路由，用request对象解析前端传来的数据：

from flask import Flask, render_template, request, jsonify

app = Flask(__name__)

# 你的现有页面渲染路由
@app.route('/')
def index():
    return render_template('index.html')

# 专门接收JS数据的路由
@app.route('/send-student-data', methods=['POST'])
def receive_student_data():
    # 解析前端传来的JSON数据
    received_data = request.get_json()
    # 提取具体字段，在Python里做后续处理
    student_id = received_data.get('studentId')
    major = received_data.get('major')
    grade = received_data.get('grade')
    
    # 示例：打印接收的数据，实际可以存数据库、做计算等
    print(f"收到学生数据：学号{student_id}，专业{major}，年级{grade}")
    
    # 返回响应给前端，告知处理结果
    return jsonify({'status': 'success', 'msg': '数据接收并处理完成'})

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

如果你的场景需要刷新页面提交数据，可以用隐藏表单字段，让JS把变量赋值给这些字段后提交表单。

前端HTML + JavaScript #

<!-- 在HTML里添加一个带隐藏字段的表单 -->
<form id="campusForm" action="/submit-form-data" method="POST">
    <input type="hidden" id="studentIdInput" name="student_id">
    <input type="hidden" id="majorInput" name="major">
    <!-- 可以手动点击按钮提交，也用JS自动提交 -->
    <button type="submit">提交学生信息</button>
</form>

<script>
    // 你的JS变量
    const studentId = "2023001";
    const major = "软件工程";
    
    // 把变量赋值给隐藏表单字段
    document.getElementById('studentIdInput').value = studentId;
    document.getElementById('majorInput').value = major;
    
    // 如果需要自动提交，取消下面的注释即可
    // document.getElementById('campusForm').submit();
</script>

后端Flask代码 #

@app.route('/submit-form-data', methods=['POST'])
def receive_form_data():
    # 从表单里获取数据
    student_id = request.form.get('student_id')
    major = request.form.get('major')
    
    print(f"表单提交的学生数据：学号{student_id}，专业{major}")
    
    // 处理完可以跳转到结果页面，或者返回提示
    return render_template('result.html', message='数据提交成功！')

如果你的项目已经引入了Axios，代码会比Fetch更简洁，原理和异步请求一致：

前端JavaScript代码 #

// 如果是浏览器环境，记得先引入Axios的CDN或者通过npm安装
import axios from 'axios';

const campusInfo = {
    studentId: "2023001",
    major: "软件工程"
};

axios.post('/send-student-data', campusInfo)
.then(function (response) {
    console.log(response.data);
})
.catch(function (error) {
    console.log(error);
});

后端的/send-student-data路由和方法1完全一致，不需要修改。

额外注意事项 #

• 别忘了在Flask里导入request和jsonify（用异步请求时需要）
• 如果开发时前端和后端端口不同（比如前端跑3000，后端跑5000），会遇到跨域问题，需要安装flask-cors扩展解决：

  pip install flask-cors
  

  然后在Flask里配置：

  from flask_cors import CORS
  CORS(app)
  

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