Ajax传递span文本至Flask触发BadRequestKeyError问题咨询

问题 #

我想通过Ajax POST请求把<span id="myspan">text</span>元素的文本值发送到Flask，目前遇到了BadRequestKeyError错误：

werkzeug.exceptions.BadRequestKeyError: 400 Bad Request: The browser (or proxy) sent a request that this server could not understand. KeyError: 'data'

我遍历client_data的键值对能打印出正确值，但Flask没法读取request.form['data']，请问原因是什么？

我的前端代码：

function upload_columns (){
  let spantext = {
    mainfile_column: $("#myspan").text(),
  };
  return $.ajax({
    type: 'POST',
    url: 'receave_columns',
    data: spantext
  });
}
$(function(){
  $("#mybutton").on("click", ()=>{
    let column_promise = upload_columns();
    column_promise.done(console.log("success"))
  });
});

后端Flask路由代码：

@flask_class.route('/receave_columns', methods=['POST'])
def client_choice():
    client_data = request.form['data']
    return jsonify({"data": client_data})

原因及解决办法 #

核心原因 #

说白了就是前后端的键名不匹配！你前端发送的POST数据里，字段键是mainfile_column，但后端却一个劲地去拿data这个键——就像你把东西放到了标着"A"的抽屉，却非要去标着"B"的抽屉找，肯定找不到嘛，这就是KeyError: 'data'的根源。

另外还有个小细节：你前端的done方法写法有问题，console.log("success")会直接执行，不管请求是否成功，得把它包进函数里才行。

解决步骤 #

两种方案选其一即可：

方案1：修改后端，匹配前端的键名

把后端里的request.form['data']改成对应前端的mainfile_column：

@flask_class.route('/receave_columns', methods=['POST'])
def client_choice():
    # 改成前端实际发送的键名
    client_data = request.form['mainfile_column']
    return jsonify({"data": client_data})

方案2：修改前端，把键名改成data

调整spantext对象的键名，和后端的取值对应上：

function upload_columns (){
  let spantext = {
    // 把键改成data，匹配后端的取值逻辑
    data: $("#myspan").text(),
  };
  return $.ajax({
    type: 'POST',
    url: 'receave_columns',
    data: spantext
  });
}

顺便修正前端的回调问题 #

把column_promise.done(console.log("success"))改成下面这样，确保只有请求成功时才打印提示：

column_promise.done(() => console.log("success"))

内容的提问来源于stack exchange，提问作者herbert mühlex