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

Posted 2023-02-24

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

【英文标题】：node.js + mysql + ejs update screen information without reloading page after data insert

【发布时间】：2020-05-20 20:25:02

【问题描述】：

我正在尝试在插入后更新我的任务列表，当前当我按下按钮时，在我的 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
      );
    
  );

【参考方案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)

【讨论】：

"PS : 你也可以像 id="addTask" 一样给你的按钮添加一个 id 然后使用 $("#addTask").click( () => //what i'上面已经完成)" 这就是我正在做的事情，但是在哪里写你的 jquery？我目前正在 ejs 文件中执行此操作，因为如果我尝试将代码放入静态文件中，它无法识别数据并引发错误

我猜您正在尝试使用已发送到 EJS 页面但未在任何地方打印的数据，而您将其打印在脚本标签中？一种解决方法是隐藏带有数据或值的html标签。 <div id="test" data-nameOfYourValue="data" hidden></div> 在 jquery 中你可以像这样访问它$("#test").attr("data-nameOfYourValue")