Node.js express, ejs, request - показывать вращающееся колесо при выполнении запроса

Я использую запрос https://github.com/request/request. Можно ли показать вращающееся колесо во внешнем интерфейсе при выполнении запроса? Допустим, раскрутить прялку? Если да, то как это сделать?

На данный момент я показываю сообщение об успехе или ошибке...

router.post('/search', (req, res) => {
    request.get({
        headers: {
            "authorization": auth
        },
        url: "localhost/abc/search?name=peter"
    }, (error, response, body) => {
        if(error) {
            return console.dir(error);
        }
      var jsonBody = JSON.parse(body);

      if(jsonBody.status === 200) {
        console.log('Request successful!');
        req.flash('success', 'Database search successful! :)')
        res.redirect('/search')
        }
      if(jsonBody.success === false) {
        console.log('Request not successful!');
        req.flash('error', 'Request not successful! :(')
        res.redirect('/search')
      }
    });
});

В качестве внешнего интерфейса я использую ejs:

   <html lang="en">
    <head>
    </head>
    <body>
     <div class="container-fluid">
      <div class="card card-container">
        <h2 class='login_title text-center'><%= page %></h2>
        <hr>

        <form class="form-container" method="post" action="/search">
          <button class="btn btn-lg btn-primary" type="submit">Search</button>
        </form>

        <% if (messages.success) { %>
            <div class="alert alert-success alert-dismissible" role="alert">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <%= messages.success %>
            </div>
        <% } %>
        <% if (messages.error) { %>
            <div class="alert alert-danger alert-dismissible" role="alert">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <%= messages.error %>
            </div>
        <% } %>

      </div>
     </div>
    </body>
   </html>
Источник

1 ответ

Исходя из вашего кода, похоже, что вы отправляете почтовый запрос по тому же URL-адресу и прикрепляете данные к ответу, чтобы сделать ваш флеш-обмен сообщениями.

Невозможно использовать это вращающееся колесо, используя систему запросов, которой вы сейчас пользуетесь, однако я хотел бы обратить ваше внимание на изучение AJAX (Fetch API/Axios - хорошие библиотеки, чтобы немного упростить это).

Это в основном позволяет вам делать запросы без перезагрузки страницы, а затем ваши данные возвращаются в виде переменных javascript, к которым вы можете получить доступ.

Например, вы отправляете свою форму, у вас есть обработчик событий, который останавливает выполнение вашей формы обычного запроса и вместо этого выполняет запрос ajax. Как только этот запрос ajax отослан, вы настраиваете колесо загрузки на вращение (сначала скрывая, а затем отображая:block или какой-либо другой метод). Ваш запрос ajax имеет обратный вызов, когда он закончен. В этом обратном вызове у вас есть доступ к данным из запроса и можете продолжить оттуда.

Следует также отметить, что с помощью этого метода более разумно возвращать переменные в JSON, чем возвращать стандартный HTML, а затем создавать любой необходимый HTML-код через javascript, используя эти переменные, и размещать их в своем HTML.

Это хороший сайт для изучения AJAX. Код может выглядеть немного длиннее, но библиотеки, упомянутые выше, превратят это в несколько строк.

Источник
Другие вопросы по тегам