javascript - 返回烧瓶后端列表

Question

我有一个带有列表的网页，用户可以在其中选择丢弃单击十字的行（数据是从数据库中导入的）。我希望在用户单击底部的按钮时返回剩余行的列表。

页面如下所示： 这是页面的代码：

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

当我单击提交列表时，打印结果功能完美运行，并在 Web 控制台中打印出我想要的内容，但我不知道如何将其发送到 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) ```

标签： javascriptformsflaskhtml-listspython-3.6

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>

烧瓶：

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)

“数据”变量将是网页中的 JSON