如何在不重新加載頁面即可生效的情況下應用此AJAX請求？

Question

這是一個待辦事項應用程序。 每當我單擊“添加”時，它都需要重新加載頁面，以使其生效，並且您實際上可以看到這些項目。

我想在不需要刷新頁面的地方發出請求AJAX。 我該怎么做？

我將Express用於服務器，將EJS用於視圖引擎。

這是該應用程序的服務器內容：

let items = [];
module.exports = function(app, urlencoded) {
  app.get("/todo", function(req, res) {
    res.render("toDo", { data: items });
  });
  app.post("/todo", urlencoded, function(req, res) {
    items.push(req.body);
    console.log(req.body);
  });
  app.delete("/todo:item", function(req, res) {});
};

這是我用來發送AJAX請求的腳本：

let btn = document.querySelector("button");
let itemValue = document.querySelector("input").value;
btn.addEventListener("click", function() {
  var xhr = new XMLHttpRequest();
  xhr.open("POST", "/todo", true);
  xhr.setRequestHeader("Content-Type", "application/json");
  xhr.send(
    JSON.stringify({
      item: itemValue
    })
  );
});

這是HTML（EJS）文件：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>To-do Application</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" media="screen" href="../Public/Assets/Styles.css" />
  <script src="../Public/Scripts/Add.js" defer></script>
</head>
<body>
  <div id="todo-table">
    <form onsubmit="return false;">
      <input type="text" name="item" placeholder="Write an item here" required>
      <button id="Add">Add</button>
    </form>
    <ul>
      <% data.forEach(function(element){ %>
        <li> <%= element.item %> </li>
      <% }) %>
    </ul>
  </div>
</body>
</html>

Answer 1

我解決了這個問題。 當請求成功時，我自己創建了<li> ，然后在頁面准備就緒時加載了它們。 我還刪除了ejs的數據對象，因為我發現了它們的問題，因為它們僅在刷新/加載頁面時才呈現，下次，我將使用諸如Vue / React之類的更具交互性和實時性的東西。

如何在不重新加載頁面即可生效的情況下應用此AJAX請求？

問題描述

1 個解決方案

解決方案1
0 2018-08-31 12:30:21

如何在不重新加載頁面即可生效的情況下應用此AJAX請求？

問題描述

1 個解決方案

解決方案1 0 2018-08-31 12:30:21

解決方案1
0 2018-08-31 12:30:21