Блог

Главная - Вопросы по программированию - Как обновить данные шаблона EJS без перезагрузки страницы

Как обновить данные шаблона EJS без перезагрузки страницы

#javascript #jquery #ajax #ejs

#javascript #jquery #ajax #ejs

Вопрос:

У меня есть шаблон EJS, который принимает файл userData с сервера.

Как я могу реализовать обновление пользовательских данных в шаблоне без перезагрузки страницы?

Мне удалось отправить данные на сервер без перезагрузки страницы методами Ajax post в других частях приложения.
Но не могу найти подход к отображению обновленных данных в шаблоне без перезагрузки страницы.

Шаблон EJS
Он отображается, когда браузер переходит к URL /tasks

Этот фрагмент является лишь частью приложения для демонстрации структуры.

     <%userData.forEach(function(project){%>
<div class="project">
  <div class="projectHeader">
    <div class="projectTitle">
      <span>
        <a data-toggle="modal" data-target="#editDeadLineModal">
          <i id="setListDeadline" data-id="<%=project.id%>" class="far fa-calendar-alt fa-2x" data-toggle="tooltip" data-placement="top" title="Set Deadline"></i>
        </a>
      </span>
      <%if(project.deadline == null){%>
      <h5 class="projectName"><%=project.name%></h5>
      <%}else{%>
      <% var deadline = project.deadline.toDateString()%>
      <h5 data-toggle="tooltip" data-placement="top" title="Deadline <%=deadline%>" style="align-items: center;" class="projectName">
        <%=project.name%>
      </h5>
      <%}%>
   </div>
  </div>
 </div>

Я использую цикл forEach, чтобы захватить каждый project элемент в файле и отобразить его <div class="project"> , чтобы страница была заполнена таким количеством объектов, в которых она находится userData .

  • userData содержит:

    • project.id
    • project.name
    • project.deadline

Например, я изменил project.name и отправил с помощью метода Ajax post новые данные на сервер.

Я знаю, что он сохраняется — так как после выполнения запроса регистрируется «Новые сохраненные данные».

Вот мой метод GET.

После достижения URL-адреса запрашивайте базу данных для всех projects и отправляйте их в шаблон.

 app.get("/tasks",  async (req, res) => {
  const results = await pool.query(`SELECT * FROM projects`);

  res.render("tasks", {
    userData: results,
  })
})

Комментарии:

1. Вы хотите, чтобы сервер отправлял сообщение клиентскому браузеру, например, в приложениях реального времени, например, в чате, для которого требуется веб-сокет или http-пул от сервера к клиенту, проверьте сокет. ввод-вывод для примеров и документов

2. @MedetTleukabiluly спасибо за подсказку (сейчас ищу эту опцию), но технически возможно реализовать обновление шаблона ejs без перезагрузки, только с помощью Ajax или Jquery в данном конкретном случае?

3. Браузер не знает, когда обновлять, вот в чем проблема

4. Как я понимаю — $(".project").on('click', function() { refresh page code } это не случай обновления. Так ли это?

5. Поскольку вы уже выполняете ajax-запрос для обновления данных, вы можете просто выполнить еще один ajax-вызов при успешном выполнении, например $.post("update", data).done(function() { $.get("tasks").done(function(data) { render data }) }) . Вы можете улучшить читаемость, используя async / await или определяя функцию get отдельно