Question

我正在使用请求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>

Answer 1

根据您的代码，您似乎正在将发布请求发送到相同的url，并将数据附加到响应中以进行Flash消息传递。

不可能使用当前使用的请求系统来运行此纺车，但是我会向您介绍学习AJAX（Fetch API / Axios是简化此操作的好库）。

这基本上使您可以在不重新加载页面的情况下发出请求，然后将数据作为可访问的javascript变量返回。

例如：提交表单，您有一个事件处理程序，该处理程序停止您的表单执行常规请求，而是执行ajax请求。发送该ajax请求后，您就可以将加载轮设置为旋转（先隐藏然后显示：block或其他方法）。您的ajax请求在完成时有一个回调。在该回调中，您可以访问请求中的数据，并可以从那里继续。

要注意的另一件事是，使用此方法，以JSON返回变量比返回标准HTML，然后使用这些变量通过javascript创建所需的任何HTML并将其放置在HTML中更为合理。

This is a good site to learn AJAX，代码可能看起来有点长，但是上面提到的库会将其变成几行。

Node.js Express，EJS，请求-在执行请求时显示纺车

1 个答案: