如何在不重新加载页面生效的情况下应用此 AJAX 请求？答案

【问题标题】：How I can apply this AJAX request without reloading the page to take effect?如何在不重新加载页面生效的情况下应用此 AJAX 请求？
【发布时间】：2019-02-04 12:12:38
【问题描述】：

这是一个待办事项应用程序。每当我点击“添加”时，它都需要重新加载页面才能生效，您才能真正看到这些项目。

我想在不需要刷新页面的地方发出请求 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>

【问题讨论】：

在add.post函数末尾添加res.render("/todo");。
@Arihant 它不起作用。我仍然需要刷新它。
@Arihant 也不是“/todo”，它只是“todo”，因为它是一个文件，而不是路径。
html、js 文件名是什么。console.log 里面的console.log 被打印出来了吗？
对不起是res.redirect("/todo");

标签： javascript node.js ajax express ejs

【解决方案1】：

我解决了这个问题。我只是在请求成功时自己创建了<li>，然后在页面准备好时加载它们。我还删除了 ejs 的数据东西，因为我发现它们是问题，因为它们仅在页面刷新/加载时呈现，下次我将使用更具交互性和实时性的东西，例如 Vue/React。

【讨论】：