通过 http post 请求从 Javascript 发送词典到 python

Question

我在 sublime text 中使用 flask 和 sqlalchemy 创建一个简单的 web 应用程序。在 'studentscreen.html' 中，有多个 html 元素（post-it notes/sticky 注释）由标题和一些文本组成。这些是使用 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 请求。）

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

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... */

这将创建两个数组； text 和 title 包含所有文本和标题。我正在尝试将此信息发送到 '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' 的字典）。

有时它 returns 像这样的东西：

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

请告诉我如何格式化内容并执行 post 请求并在 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"]

通过 http post 请求从 Javascript 发送词典到 python

Send dictionary via http post request from Javascript to python

javascript

python

xmlhttprequest

flask

flask-sqlalchemy