从客户端获取数据（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并将其与DELETE请求一起发送到服务器。

我将举例说明：

1. 选择ID为1任务以删除。
2. 获取选定的任务ID，准备发出Ajax请求
3. 在资源DELETE /task/1上发出Ajax请求
4. API会向未找到的项目返回状态代码204 No Content ， 404 Not found ，并且根据您的需要返回更多状态代码。

---

• MDN-AJAX / jQuery Ajax 入门
• 进一步了解DELETE方法
• 什么是休息资源
• 有关HTTP状态的更多信息