返回<ul> 列表到flask后台。

Question

我有一个网页，其中有一个列表，用户可以选择放弃点击十字线（数据是从DB导入的）。我希望当用户点击底部的按钮时，剩余行的列表会被返回。

这个页面看起来是这样的。这是该页面的代码

<script type="text/javascript">
  function removeParent(e) {
    var toDel = e.parentNode;
    toDel.parentNode.removeChild(toDel);
  }
  function printresult() {
    var test = document.getElementById("tableID");
    console.log(test);
  }
</script>

{% endblock %} {% block body %}
<form class="adminSongsListForm" action="/admintools" method="POST">
  <table id="tableID">
    <tr class="adminToolsLine">
      <th class="adminToolsBox1" type="text" name="Artist" id="Artist">
        Artist
      </th>
      <th class="adminToolsBox1" type="text" name="Album" id="Album">Album</th>
      <th class="adminToolsBox2" type="text" name="Track" id="Track">Track</th>
      <th class="adminToolsBox3" type="text" name="Genre" id="Genre">Genre</th>
      <th class="adminToolsBox3" type="text" name="Length" id="Length">
        Length
      </th>
      <th class="adminToolsBox1" type="text" name="Infos" id="Infos">
        Infos
      </th>
      <th class="adminToolsBox0Header">Decline</th>
    </tr>
    <ul>
      {% for line in tracks %}
      <li class="adminToolsGrid">
        <tr class="adminToolsLine">
          <td class="adminToolsBox1" type="text" name="Artist" id="Artist">
            {{line[1]}}
          </td>
          <td class="adminToolsBox1" type="text" name="Album" id="Album">
            {{line[2]}}
          </td>
          <td class="adminToolsBox2" type="text" name="Track" id="Track">
            {{line[3]}}
          </td>
          <td class="adminToolsBox3" type="text" name="Genre" id="Genre">
            {{line[4]}}
          </td>
          <td class="adminToolsBox3" type="text" name="Length" id="Length">
            {{line[5]}}:{{line[6]}}
          </td>
          <td class="adminToolsBox1" type="text" name="Infos" id="Infos">
            {{line[7]}}
          </td>
          <td class="adminToolsBox0Line" onclick="removeParent(this)">X</td>
        </tr>
      </li>
      {% endfor %}
    </ul>
  </table>
  <div class="buttonHolder">
    <button class="UploadButton" type="button" onclick="printresult()">
      Submit list
    </button>
  </div>
</form>
{% endblock %}

当我点击提交列表时，打印结果功能完美地工作，并在网络控制台打印出我想要的东西，但我不知道如何将其发送到Flask后台：当我点击提交列表时，在python终端没有任何显示。

@app.route('/admintools', methods=["POST", "GET"])
#@login_required
def admintools():
    tracks = observed_tracks(get_tracks())
    if request.method == "POST":
        print("request.method == POST")
        print(str(request.form))
    return render_template("tools/admintools.html", tracks=tracks) ```

Answer 1

简答:我把数据变成JSON，然后用XMLHTTP请求发送。

长答案。

JavaScript:

<script type="text/javascript">
  function removeParent(e) {
    var toDel = e.parentNode;
    toDel.parentNode.removeChild(toDel);
  }
  function xmlToJson(xml) {
    // Create the return object
    var obj = {};

    if (xml.nodeType == 1) {
      // element
      // do attributes
      if (xml.attributes.length > 0) {
        obj["@attributes"] = {};
        for (var j = 0; j < xml.attributes.length; j++) {
          var attribute = xml.attributes.item(j);
          obj["@attributes"][attribute.nodeName] = attribute.nodeValue;
        }
      }
    } else if (xml.nodeType == 3) {
      // text
      obj = xml.nodeValue;
    }

    // do children
    if (xml.hasChildNodes()) {
      for (var i = 0; i < xml.childNodes.length; i++) {
        var item = xml.childNodes.item(i);
        var nodeName = item.nodeName;
        if (typeof obj[nodeName] == "undefined") {
          obj[nodeName] = xmlToJson(item);
        } else {
          if (typeof obj[nodeName].push == "undefined") {
            var old = obj[nodeName];
            obj[nodeName] = [];
            obj[nodeName].push(old);
          }
          obj[nodeName].push(xmlToJson(item));
        }
      }
    }
    return obj;
  }
  function sendData() {
    let data = document.getElementById("tableID");
    console.log(data);
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "/validate", true);
    xhr.setRequestHeader("Content-Type", "application/json");
    xhr.send(JSON.stringify(xmlToJson(data)));
    console.log(xhr);
  }
</script>

只有HTML中的按钮发生了变化

    <button
      type="button"
      class="UploadButton"
      value="Send form"
      onclick="sendData();"
    >
      Submit list
    </button>

Flask。

def validate():
    tracks = observed_tracks(get_tracks())
    if request.method == "POST":
        data = (request.data.decode('UTF-8'))
        list_validated = validation(validated[1:])
    return render_template("tools/validate.html", tracks=tracks)

"data "变量将是来自网页的JSON格式。