从客户端 (html) 获取数据并将其发送回服务器站点 (Server.js) Node.Js

Question

我正在尝试创建自己的 TODO-WEB-APP。

我正在尝试向我的应用添加删除功能。

我正在使用从 server.js 获取请求，并将（通过 res.render）任务数组传递给 hbs 文件。

现在，从 server.js 获取数据后，我将其显示在 hbs 文件中，然后我想允许用户选择他要删除的任务。

我的问题是，一旦用户选择要删除的任务，我不知道如何从 hbs 取回这些数据。

server.js 中的代码（请求）：

/*All tasks*/
app.get('/allTasks',(req,res)=>{ //get (go to) the allTasks (hbs file)
  Todo.find().then((todos) => {
    //console.log(todos);
    var arrayOfTodos = [];
    var missionIndex = 0;
    todos.forEach(function(element){
      //console.log("\n\n\n\n\n elemnt details: ",element.text + "\n",element.completed+"\n");
      missionIndex = missionIndex + 1;
  var addToArrayJson = {
        text: element.text,
        completed: element.completed,
        missionNumber: missionIndex
      }
      arrayOfTodos.push(addToArrayJson);
      console.log("ff\n\n", addToArrayJson);
     });
     res.render("allTasks.hbs", {
       pageTitle: "All tasks: ",
       todos: arrayOfTodos
       });
       console.log("\n\n\n\n\n\n\ is::: \n\n\n\n\n",arrayOfTodos);
   });
   console.log("req is: \n\n\n", req);
});

hbs文件中的代码：

    <form id="delete">
      <input value="Delete" type="submit">
    </form>
<select id = "chooseDelete" form="delete">
        <option> Choose task to delete</option>
        {{#each todos}}
        <option>{{missionNumber}}</option>
        {{/each}}
        </select>

这样，我得到了地址行中的值，但是不知道怎么抓取，发给server.js。

这样：

<p id="demo"></p>
        <button id="deleteButton">Delete</button>

        <script>
        deleteButton.addEventListener("click", function(){
            document.getElementById("demo").innerHTML =  document.getElementById("chooseDelete").value;
        });
        </script>

我只是得到了值：document.getElementById("chooseDelete").value; 但同样，我不知道如何将其传递回服务器。

[你可以看到这张照片][1]

如果可以，请帮助我。

Answer 1

我建议您执行 Ajax DELETE 请求。

所以...基本上，您将获得要删除的 taskID 并将 ID 通过 DELETE 请求发送到您的服务器。

我会举例说明：

1. 选择 ID 为 1 的任务进行删除。
2. 获取选定的任务 ID 准备发出 Ajax 请求
3. 对资源 DELETE /task/1 发出 Ajax 请求
4. API 将根据您的需要将状态代码 204 No Content、404 Not found 返回到未找到的项目和更多内容。

---

• MDN - Getting Start with AJAX / jQuery Ajax
• See more about DELETE method
• What is a rest resource
• More about HTTP Status