通过 http post 请求从 Javascript 向 python 发送字典

Question

我在 sublime text 中使用 Flask 和 sqlalchemy 来创建一个简单的 Web 应用程序。 在'studentscreen.html' 中，有多个由标题和一些文本组成的html 元素（便利贴/便签）。 这些是使用 for 循环创建的。 像这样：

<ul id='postlist'>

        {% for post in posts %}

            {% if loggedIn == True: %}


                {% if post[3] == True: %}

                  <li>
                    <a>
                        <h2 onkeypress="return (this.innerText.length <= 15)" contenteditable="true" onblur="saveText()">{{post[1]}}</h2>
                        <p onkeypress="return (this.innerText.length <= 60)" contenteditable="true" onblur="saveText()">{{post[2]}}</p>
                    </a>
                  </li>

    <!-- etc... -->

使用“onblur”，调用名为saveText()的 Javascript 函数。

此函数应该为已创建的任何注释检索“h2”文本以及“p”文本，并使用 http post 请求将其发送到我的“routes.py”文档。 （我不确定如何执行 ajax 请求。）

现在，我检索每个帖子的内容，如下所示：

function saveText(){
    
            let postsRef  = document.getElementById('postlist').getElementsByTagName('li');
    
            var text = [];
            var title = [];
    
            for (let i = 0; i < postsRef.length; i++) {
                text.push([postsRef.item(i).getElementsByTagName('p')[0].innerHTML]);
            }
    
            for (let i = 0; i < postsRef.length; i++) {
                title.push([postsRef.item(i).getElementsByTagName('h2').[0].innerHTML]);
            }
    
    /* etc... */

这将创建两个数组； 文本和标题保存所有文本'和标题'。 我正在尝试将此信息发送到“routes.py”，如下所示：

var http = new XMLHttpRequest();
var url = "/newtext";
http.open ("POST", url, true);
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.send(/* something! */);

我不知道要传递给.send() 。 此外我不知道如何接收要发送的信息。 现在我有以下几点：

@app.route("/newtext", methods = ["POST", "GET"])
    def newText():

        if request.method == "POST":
            data = request.form


    # etc... #

我尝试了不同的替代方法，如request.form.get() 、 request.value和request.form.get('name') （在'studentscreen.html'中创建一个名为'name'的键的字典）。

有时它返回这样的东西：

'None', 
{}, 
ImmutableMultiDict([]), 
CombinedMultiDict([ImmutableMultiDict([]), 
ImmutableMultiDict([('object Object', '')])])

请让我知道如何格式化内容并执行发布请求并在 python 中接收它。

谢谢！ /威廉

Answer 1

在发送函数中，您需要发送 xml 表单。

http.send(`title=${title}&text=${text}`); 

${} 中的一个是列表。

在烧瓶中，您可以使用访问它

request.form.get("title")
request.form.get("text")

编辑：ajax 版本

在你的 html 中包含 jquery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>


$.ajax({
    type: "POST",
    url: url,
    data: JSON.stringify({titles: title, contents: text}),
    contentType: "application/json; charset=utf-8"
    success: function(response){
     
    }
  });

在 python 中访问它时，您需要使用 getlist

request.get_json()['titles']
request.get_json()["text"]