在提交时更新html内容

Question

我试图创建一个简单的网页，其中包含了一个表格中的评论。我可以通过调用"window.onload“事件上的以下函数来成功地填充它。

function FillCommentsTable() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var comments = JSON.parse(this.responseText);
      var i = 0;
      var old_tbody = document.getElementById("comments");
      var new_tbody = document.createElement("tbody");
      for (i = 0; i < comments.length; i++) {
        var row = new_tbody.insertRow(-1);
        var id = row.insertCell(0);
        var user = row.insertCell(1);
        var comment = row.insertCell(2);
        var timestamp = row.insertCell(3);
        id.innerHTML = comments[i].Id;
        user.innerHTML = comments[i].User;
        comment.innerHTML = comments[i].Comment;
        timestamp.innerHTML = comments[i].Timestamp;
      }
      old_tbody.parentNode.replaceChild(new_tbody, old_tbody);
    }
  };
  xhttp.open("GET", "API/get_comments.php", true);
  xhttp.send();
}

该网页还具有提交和删除注释的功能，使用简单的表单调用操作数据库存储注释的API。这里想要的功能是，在提交/删除表单被提交并调用API之后，页面将被重新加载并更新表。为了实现这一点，我尝试用以下方式重新加载submit页面：

<form action="API/delete_comment.php" method="post"
onsubmit="window.location.reload()">
  <input type="number" name="id">
  <input type="submit" value="Delete">
</form>

但是，这似乎没有任何效果，只是发送了对API的预期调用。这也只有在尝试用表单更新表时才会发生，因为只绑定了一个按钮：

<button onclick="window.location.reload()">Load comments</button>

正常工作，并正确更新表。难道不可能同时将GET和POST发送到在同一事件上触发的API，或者我在这里遗漏了什么？

Answer 1

AJAX的目的是能够与服务器进行通信，而不必重新加载页面.

使用AJAX提交表单，然后简单地再次调用FillCommentsTable。

<form action="#" method="post" onsubmit="return deleteComment()">
  <input type="number" name="id">
  <input type="submit" value="Delete">
</form>

function deleteComment() {
  var id = document.querySelector("input[name='id']");
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      FillCommentsTable();
    }
  };
  xhttp.open("POST", "API/delete_comment.php", true);
  xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhttp.send("id="+encodeURIComponent(id.value));
  return false;
}

编辑:上面的成功地发送获取数据的GET请求。除了这些变化之外，我还添加了

  new_tbody.setAttribute("id","comments");

在FillCommentsTable函数中。忽略此错误导致注释表主体在第一次重新加载时丢失其名称，然后导致对FillCommentTable的后续调用无效，因为没有名为“注释”的tbody .