Flask中从HTML/JS传递变量到Python始终返回None的解决方法

核心问题分析 #

1. 数据格式错误：你把FormData用JSON.stringify()转换后发送，这会导致FormData的内容丢失，Flask的request.form无法解析到有效数据。
2. 键名不匹配：前端向FormData中添加的是name字段，但后端尝试获取data字段，自然返回None。
3. 冗余设置与冲突：按钮同时绑定了onclick="likePost()"和脚本中的onclick赋值，会导致事件触发冲突；且手动设置的请求头与FormData的传输格式不兼容。

修正后的前端代码 #

<p>
    <button id="likebutton">
        <img class="likebuttonimg" src="static/images/clearlike.png" id="image">
    </button>
</p>
<p>
{{likes}} likes
{{views}} views
</p>

<script>
    // 假设你有要传递的articlename变量
    const articlename = "你的文章名称";
    // 绑定点击事件
    document.getElementById("likebutton").onclick = function () {
        // 创建FormData并添加字段
        const data = new FormData();
        data.append("articlename", articlename);
        // 发送请求
        fetch('/tracklikes', {
            method: 'POST',
            body: data // 直接发送FormData，无需转JSON
        });
    };
</script>

修正后的后端代码 #

@app.route("/tracklikes", methods=['POST'])
def tracklikes():
    print("TrackLikes activated")
    # 对应前端的键名articlename
    articlename = request.form.get('articlename')
    print(articlename)
    # 后续数据库操作...
    return "Success" # 需要返回响应，否则Flask会报错

额外说明 #

如果不想用FormData，也可以用JSON格式发送，只需调整前后端代码：

• 前端修改：

  fetch('/tracklikes', {
      method: 'POST',
      headers: {
          'Content-Type': 'application/json'
      },
      body: JSON.stringify({ articlename: articlename })
  });
  

• 后端修改：

  articlename = request.get_json().get('articlename')
  

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