如何通过JavaScript发送POST请求传递字典数据到Flask Python后端

1. 前端JS代码修改 #

你可以直接将便签数据整理为结构化的JSON格式传输，相比表单编码更适合传递数组类的复杂数据，修改后的saveText函数如下：

function saveText(){
    const postsRef  = document.getElementById('postlist').getElementsByTagName('li');
    const allPosts = [];
    // 单次循环同时收集标题和内容，避免重复遍历
    for (let i = 0; i < postsRef.length; i++) {
        const currentLi = postsRef.item(i);
        // 用innerText代替innerHTML，避免意外拿到HTML标签、降低XSS风险
        const noteTitle = currentLi.getElementsByTagName('h2')[0].innerText;
        const noteContent = currentLi.getElementsByTagName('p')[0].innerText;
        allPosts.push({
            title: noteTitle,
            content: noteContent
        });
    }
    // 发送AJAX请求
    const http = new XMLHttpRequest();
    const url = "/newtext";
    http.open("POST", url, true);
    // 设置请求头为JSON格式
    http.setRequestHeader("Content-type", "application/json");
    // 将JS对象转为JSON字符串传入send方法
    http.send(JSON.stringify(allPosts));
    // 可选：添加请求回调验证结果
    http.onreadystatechange = function() {
        if (http.readyState === 4 && http.status === 200) {
            console.log("保存成功", http.responseText);
        }
    }
}

2. Flask后端代码修改 #

因为请求传递的是JSON格式数据，所以不能用request.form获取，需要调用request.get_json()方法解析：

from flask import request, jsonify
# 如不需要GET方法可直接移除，只保留POST
@app.route("/newtext", methods = ["POST"])
def newText():
    if request.method == "POST":
        # 直接解析请求体中的JSON，得到和前端结构一致的Python列表
        all_posts = request.get_json()
        # 示例：遍历数据写入数据库（按需修改为你的业务逻辑）
        # for post in all_posts:
        #     new_note = NoteModel(title=post['title'], content=post['content'])
        #     db.session.add(new_note)
        # db.session.commit()
        # 返回JSON格式响应
        return jsonify(status="success", message="便签已保存")

可选：保留原双数组结构的实现 #

如果你不想修改原有收集text和title两个数组的逻辑，只需修改请求发送和后端解析部分即可：

前端send部分修改： #

// 把两个数组包成一个对象转JSON
http.send(JSON.stringify({
    title_list: title,
    content_list: text
}));

后端解析部分修改： #

data = request.get_json()
title_list = data['title_list']
content_list = data['content_list']

常见问题说明 #

你之前拿到空值/None的原因是：

• 使用表单编码的Content-Type传递未序列化的JS对象，或者序列化格式不符合表单编码规则
• 用适配表单数据的request.form读取JSON格式的请求体，自然无法解析到内容

内容的提问来源于stack exchange，提问作者William O'Brien