通过Flask后端将JS前端表单数据存入MySQL时遇400错误求助

错误根源 #

1. 请求格式不匹配：前端设置了Content-Type: application/json请求头，但实际发送的是FormData对象，导致后端无法正确解析请求体，request.json返回null。
2. 后端语法错误：mysql.connection().commit()多了一对括号，正确写法是mysql.connection.commit()。
3. 缺少错误处理：未对空数据或缺失字段做校验，直接执行数据库操作会触发异常。

解决方案（两种可选） #

方案一：发送JSON格式数据（匹配后端原接收逻辑）

修改前端代码，将表单数据转为JSON字符串发送，同时保留application/json请求头：

const form = document.getElementById("form")

document.getElementById('form').addEventListener('submit', function(e) {
    e.preventDefault()

    // 手动构建JSON对象，注意字段名要和后端接收的一致
    const formData = {
        dateID: document.getElementById('dateID').value,
        week_day: document.getElementById('week_day').value,
        day: document.getElementById('day').value,
        rate: document.getElementById('rate').value
    }

    const url = "http://localhost:6969/add-data"

    fetch(url, {
       method: "POST",
       headers: {
            'Content-Type':'application/json',
            'Accept': 'application/json'
       },
       body: JSON.stringify(formData)
    })
    .then(response => {
        if (!response.ok) throw new Error('请求失败')
        return response.json()
    })
    .then(result => {
        console.log("Success:", result)
        form.reset() // 提交后清空表单
    })
    .catch(error => console.error("Error:", error))
})

修改后端代码，修复语法错误并添加校验逻辑：

@app.route("/add-data", methods=['POST'])
@cross_origin()
def add():
    data = request.json
    # 校验JSON数据是否存在
    if not data:
        return jsonify({"error": "无效的JSON数据"}), 400
    
    # 提取字段并校验完整性
    dateID = data.get('dateID')
    week_day = data.get('week_day')
    day = data.get('day')
    rate = data.get('rate')
    
    if not all([dateID, week_day, day, rate]):
        return jsonify({"error": "缺少必填字段"}), 400
    
    try:
        cursor = mysql.connection.cursor(MySQLdb.cursors.DictCursor)
        sql_query = "INSERT INTO years_2016_2025 (dateID, week_day, day, rate) VALUES (%s, %s, %s, %s)"
        cursor.execute(sql_query, (dateID, week_day, day, rate))
        mysql.connection.commit()  # 修复括号问题
        cursor.close()
        return jsonify({"message": "Data saved successfully!"}), 201
    except Exception as e:
        mysql.connection.rollback()  # 出错时回滚事务
        return jsonify({"error": f"数据库操作失败: {str(e)}"}), 500

方案二：发送FormData格式数据（更适合表单场景）

如果想保留FormData发送方式，前端去掉Content-Type请求头（浏览器会自动设置为multipart/form-data），后端改用request.form接收：

前端修改部分：

fetch(url, {
   method: "POST",
   headers: {
        'Accept': 'application/json'
   },
   body: new FormData(form) // 直接使用FormData对象
})
// ...后续处理同方案一

后端修改部分：

@app.route("/add-data", methods=['POST'])
@cross_origin()
def add():
    data = request.form  # 改用form接收表单数据
    dateID = data.get('dateID')
    week_day = data.get('week_day')
    day = data.get('day')
    rate = data.get('rate')
    
    # 后续校验、数据库操作同方案一
    # ...

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