node.js + mysql + e js обновление информации на экране без перезагрузки страницы после вставки данных - PullRequest
Новая
       5

node.js + mysql + e js обновление информации на экране без перезагрузки страницы после вставки данных

0 голосов
/ 05 февраля 2020

Я пытаюсь обновить свой список задач после вставки, в настоящее время, когда я нажимаю кнопку, на моей странице e js я отправляю запрос на публикацию, чем в моем контроллере у меня app.post ("/ mypage" ) и здесь я использую connection.query () для моей вставки, затем я использую res.redirect () для перезагрузки страницы, поэтому мой app.get ("/ myPage") перезагружает все мои данные и показывает их на моей странице Есть ли способ этого без перезагрузки? я думал об использовании jQuery Ajax, но не могу найти достаточно источников информации об этом.

e js модально, чтобы добавить 

<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 Ответ

0 голосов
/ 05 февраля 2020

Я недавно начал использовать вашу комбинацию инструментов, поэтому я не уверен, что даю вам оптимальный способ сделать это, но я бы go таким образом использовал 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

PS : Вы также можете просто добавить идентификатор к своей кнопке, например id = "addTask", а затем использовать $("#addTask").click( () => {//what i've done above})

...