如何使用 JS 将 XML 数据发送到 Flask 后端

Question

我想使用 JS 将网页的某些部分作为 XML 文档发送到我的 Flask 后端：

我已尝试使用此 JavaScript 代码发送它：

  function sendData() {
    let data = document.getElementById("tableID");
    console.log(data);
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "app.py", true);
    xhr.setRequestHeader("Content-Type", "application/json");
    xhr.send(JSON.stringify(data));
    console.log(xhr);
  }

但没有得到后端的响应：

@app.route('/validate', methods=['POST', 'GET'])
def validate():
    tracks = observed_tracks(get_tracks())
    if request.method == "POST":
        print("submitted......")
    return render_template("tools/validate.html", tracks=tracks)

发送的数据是这样的（这只是一个示例，数据是动态生成的）：

<table id="tableID">
    <tbody>
    <tr class="adminToolsLine">
          <td class="adminToolsBox1" type="text" name="Artist" id="Artist"> Artist02 </td>
          <td class="adminToolsBox1" type="text" name="Album" id="Album">ALbum f Artist02 </td>
          <td class="adminToolsBox2" type="text" name="Track" id="Track"> ihnj </td>
          <td class="adminToolsBox3" type="text" name="Genre" id="Genre"> Indie </td>
          <td class="adminToolsBox4" type="text" name="Length" id="Length"> 9:32 </td>
          <td class="adminToolsBox1" type="text" name="Infos" id="Infos"> injojn k </td>
          <td class="adminToolsBox0Line" onclick="removeParent(this)">X</td>
        </tr>
      <tr class="adminToolsLine">
          <td class="adminToolsBox1" type="text" name="Artist" id="Artist"> testgenreMenu </td>
          <td class="adminToolsBox1" type="text" name="Album" id="Album"> testgenreMenu </td>
          <td class="adminToolsBox2" type="text" name="Track" id="Track">track01_testgenre </td>
          <td class="adminToolsBox3" type="text" name="Genre" id="Genre"> Folk </td>
          <td class="adminToolsBox4" type="text" name="Length" id="Length"> 02:00 </td>
          <td class="adminToolsBox1" type="text" name="Infos" id="Infos"> shouldbefolk </td>
          <td class="adminToolsBox0Line" onclick="removeParent(this)">X</td>
        </tr>
  </tbody>
</table>

您知道我应该对后端或 JS 进行什么更改以使其正常工作吗？

Answer 1

在您的 JS 函数中，您尝试向 python 文件 (app.py) 发送 POST 请求，但您需要做的是向路由发送 POST 请求 - 您在应用程序中拥有的烧瓶路由.py 文件。所以你需要在你的 POST 请求中指定想要的路由作为参数。

如果您查看XMLHttpRequest() 的文档，您会看到 xhr.open() 方法采用“URL”作为参数。

你没有提供 URL，你提供了一个 python 文件。

所以，

xhr.open("POST", "app.py", true);

应该是

xhr.open("POST", "/validate", true);