node.js + mysql + ejs 数据插入后无需重新加载页面即可更新屏幕信息

Question

我正在尝试在插入后更新我的任务列表，当前当我按下按钮时，在我的 ejs 页面中我提交了一个发布请求，而不是在我的控制器中我有 app.post("/mypage") 和这里我使用 connection.query() 进行插入，然后我使用 res.redirect() 重新加载页面，所以我的 app.get("/myPage") 重新加载我的所有数据并将其显示在我的页面上，是否存在一种无需重新加载的方法吗？我正在考虑使用 jQuery Ajax，但找不到足够的信息来源。

ejs 模态添加

<div class="modal" id="addTask">
      <div class="modal-content">
        <form action="/studentDashTaskAdd/<%=uID%>/<%=pID%>" method="post">
          <div class="row">
            <div class="input-field col s12">
              <input
                id="task_title"
                name="taskTitle"
                type="text"
                class="validate"
              />
              <label for="task_title">Title</label>
            </div>
          </div>
          <div class="row">
            <div class="input-field col s12">
              <textarea
                id="textarea1"
                name="taskDescription"
                class="materialize-textarea"
              ></textarea>
              <label for="textarea1">Description</label>
            </div>
          </div>

          <div class="row">
            <div class="input-field col s12">
              <input
                type="text"
                id="taskDeadine"
                name="taskDeadline"
                class="datepicker"
              />
              <label for="taskDeadine">Deadline</label>
            </div>
          </div>
          <div class="row">
            <div class="input-field col s12">
              <select id="priority" name="taskPriority">
                <option value="1">Low</option>
                <option value="2">medium</option>
                <option value="3">High</option>
              </select>
              <label for="priority">Priority</label>
            </div>
          </div>
          <button type="submit" name="submidTask" class="btn blue right">
            Submit <i class="material-icons right">send</i>
          </button>
        </form>
      </div>
      <div class="modal-footer"></div>
    </div>

//adding task from student dash
  app.post(
    "/studentDashTaskAdd/:userID/:projectID",
    parsed,
    (req, res, next) => {
      //console.log(req.body);
      connection.query(
        "INSERT INTO task(priority,description,deadline,title,userID,projectID) values('" +
          req.body.taskPriority +
          "','" +
          req.body.taskDescription +
          "','" +
          req.body.taskDeadline +
          "','" +
          req.body.taskTitle +
          "','" +
          req.params.userID +
          "','" +
          req.params.projectID +
          "');"
      );
      //console.log(req.params.userID);

      res.redirect(
        "/studentDash/" + req.params.userID + "/" + req.params.projectID
      );
    }
  );

Answer 1

我最近开始使用你的工具组合，所以我不确定我是否给你提供了最佳的方法，但我会用 jquery 这样做：

jQuery

$.post(
    "studentDashTaskAdd",
    {yourValues},
    (data, status) => 
    {

            switch(status){
                case "error":
            // Manage your issues here
                    return;
                case "timeout":
            // Manage your issues here
                    return;
                case "parsererror":
            // Manage your issues here
                    return;
            }
        // then either you send back the full list and treat it here or just append what you just sent to your server
    },
    "json"
    })

NodeJS

app.post(
    "/studentDashTaskAdd",(req,res) = >{
        const query = " your query"; //req.body still works in this case for your params
        connection.query(query,(err,results) => {
            if(err){
                res.status(400).send({message:err});
            }
            res.send("your data as json or anything to tell your ajax Ok It's done");
        })
});

如果我错了，如果有人纠正我，我会很高兴我还在学习：P

附： : 你也可以像 id="addTask" 给你的按钮添加一个 id 然后使用$("#addTask").click( () => {//what i've done above})