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

Question

I want to send some part of a webpage as an XML document to my Flask backend using JS:

I've tried sending it using this JavaScript code:

  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);
  }

but didn't get a response from the backend:

@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)

The data sent looks like this (this is just a sample, the data is dynamically generated):

<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>

Do you have any idea of what should I change to the back end or to the JS to make it work?

Answer 1

In your JS function, you are trying to send a POST request to a python file (app.py), but what you need to do is send a POST request to a route - a flask route that you have in your app.py file. So you need to specify the desired route as a parameter in your POST request.

If you check the documentation for XMLHttpRequest() , you will see that the the xhr.open() method takes "URL" is a parameter.

You haven't provided a URL, you provided a python file.

So,

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

should be

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