Flask应用中从非jQuery的Ajax请求提取数据返回None问题

嘿，我帮你定位到问题啦！你的原生Ajax请求缺少关键的请求头设置，而且数据格式也没对应上Flask的预期，导致request.get_json()一直返回None。咱们一步步来修正：

1. 给Ajax请求添加JSON请求头 #

原生XMLHttpRequest发送JSON数据时，必须明确告诉服务器请求体的格式是JSON，否则Flask默认不会自动解析请求体为JSON对象。你需要在request.open()之后、request.send()之前添加这行代码：

request.setRequestHeader("Content-Type", "application/json");

2. 修正发送的JSON数据结构 #

你现在直接JSON.stringify(localStorage.getItem("user"))得到的是一个字符串的JSON序列化结果（比如如果localStorage里存的是"alex"，序列化后会是"\"alex\""），但Flask代码里想取name.user，说明你需要发送一个包含user字段的对象。所以要先把用户名包装成对象再序列化：

const userObj = { user: localStorage.getItem("user") };
const userJson = JSON.stringify(userObj);
request.send(userJson);

3. 优化Flask后端的代码 #

原来的判断逻辑可以更简洁，而且要注意request.get_json()返回的是Python字典，不是对象，所以要用键名访问而不是属性访问：

from flask import Flask, request, session, render_template

@app.route("/", methods=["GET", "POST"])
def index():
    if request.is_json:  # 先判断是否是合法的JSON请求
        data = request.get_json()
        print(data)  # 可以看到完整的JSON数据
        # 确保user字段存在再赋值
        if "user" in data:
            session["name"] = data["user"]
    return render_template("index.html", channels=channels)

完整修改后的JavaScript代码 #

if(localStorage.getItem("user")) {
    document.querySelector("#logout").addEventListener("click", () => {
        localStorage.removeItem("user");
    });
    const request = new XMLHttpRequest();
    request.open("POST", "/");
    // 添加JSON请求头
    request.setRequestHeader("Content-Type", "application/json");
    // 包装成正确的对象结构并序列化
    const userObj = { user: localStorage.getItem("user") };
    const userJson = JSON.stringify(userObj);
    request.send(userJson);
}

这样修改后，Flask就能正确解析你的Ajax请求数据啦！

内容的提问来源于stack exchange，提问作者M. Alex