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 个答案: