我的 GET 请求正好执行了两次

Question

所以我在 jQuery 中执行了一个 GET 请求，对于某些请求，它恰好执行了两次。第一次获得适当的数据，第二次获得空对象。因为那个空对象被传递到一个 EJS 文件中，所以我的代码抛出了一个错误。我真的不明白为什么会这样。我试图抓住空对象，但这使我的网络应用程序挂起。我试图绑定和点击事件，但无济于事。这是它正在生成的输出和我编写的代码。任何帮助表示赞赏

输出：

[nodemon] restarting due to changes...
[nodemon] starting `node app.js`
Listening to port 8081
app.get
reply get requested
found
[
  {
    replies: [
      'fight me bro',
      'boss main',
      'kinda slow innit'
    ],
    _id: 5e0cb67b48dfda4448c57ec0,
    msg: 'if you can',
    likes: 2,
    date: '1/1 @ 9:10',
    seconds: 51,
    __v: 0
  }
]
reply get requested
found
[]

在第二个reply get requested可以看到，记录的对象是空的。

JQuery 代码

    $('.bubble.sender.first.animate-bottom').on('click', function(){ // hit bubble to reveal replys
      console.log("bubble clicked.");
      var message = $(this).find('input.hiddentag').val(); // gets the message
      var replydate = $(this).find('input.hiddendatetag').val(); // gets the date

      console.log("message: " + message);

      var chat = {msg: message, date: replydate};
      console.log(chat);

      $.ajax({
        type: 'GET',
        url: '/reply',
        data: chat,
        success: function(data){
          console.log("Heading to appropriate reply page.....");
          window.location.replace("/reply");
        }
      });
      return false;

    });

节点 JS 代码

app.get('/reply', function(req, res){
    console.log("reply get requested");
    // console.log("message: ", req.query);

    chats.find({msg: req.query.msg, date: req.query.date}, function(err, data) {
        if (err) {
            console.log("couldn't find chat");
            throw err // crash
        }
        console.log('found');
        console.log(data);
        res.render('reply', {chat: data});

    })
})

EJS 代码：

                <% for(var i = 0; i < chats.length; i++) { %> <!-- earlier chats go first-->
                    <% if (i % 2 == 0) { %>
                        <div class="bubble recipient first animate-bottom">
                            <li class = "display"><%= chats[i].msg %> &nbsp; &nbsp;
                                <i class="fas fa-heart liked" aria-hidden="true"></i> <sub><%=chats[i].likes%></sub> &nbsp; &nbsp; &nbsp; &nbsp;
                                <i class="fa fa-reply reply"></i>
                                <input type="hidden" id = "changeit" class = "likebutton" value = "<%=chats[i].likes%>" > 
                                <input type="hidden" class = "hiddentag" value="<%=chats[i].msg%>"> <!-- needed to get the message that was liked-->
                                <input type="hidden" class = "hiddendatetag" value="<%=chats[i].date%>"> <!-- needed to filter messages that are the same-->
                            </li>
                            <br>
                            <span>Sent: <%=chats[i].date %> </span>
                        </div>
                    <% } else { %>
                        <div class="bubble sender first animate-bottom">
                            <li class = "display"><%= chats[i].msg %> &nbsp; &nbsp;
                                <i class="fas fa-heart liked" aria-hidden="true"></i> <sub><%=chats[i].likes%></sub> &nbsp; &nbsp; &nbsp; &nbsp;
                                <i class="fa fa-reply reply"></i>
                                <input type="hidden" id = "changeit" class = "likebutton fas fa-heart" value = "<%=chats[i].likes%>" > 
                                <input type="hidden" class = "hiddentag" value="<%=chats[i].msg%>"> <!-- needed to get the message that was liked-->
                                <input type="hidden" class = "hiddendatetag" value="<%=chats[i].date%>"> <!-- needed to filter messages that are the same-->
                            </li>
                            <br>
                            <span>Sent: <%=chats[i].date %> </span>
                        </div>
                    <% } %>
                <% } %>

Answer 1

您调用了您的服务器两次，两次都使用/reply 路由。一次使用 ajax 调用，一次使用 window.location.replace(...)。

您向/reply 发送Ajax 调用。这达到了app.get('/reply', ...) 路线。

然后在 Ajax 调用的成功处理程序中，您可以：

window.location.replace("/reply");

告诉浏览器转到/reply URL。这将再次命中app.get('/reply', ...) 路由，并为您提供该路由的第二组日志。

所以，这就解释了“为什么”您会看到两组日志以及为什么路线会被命中两次。现在，问题是如何在不访问服务器两次的情况下完成您真正想要完成的工作？由于这只是一个 GET，因此您似乎应该只构建与 ajax 调用相同的 URL，然后执行以下操作：

 window.location = `/reply?msg=${message}&date=${replaydate}`;

或任何正确构造所需 URL 的方法。这将为您的 EJS 模板获取相同的数据以构建所需的网页，然后在浏览器中显示结果，并且只会调用您的服务器一次。

然后，完全跳过 Ajax 调用，因为无论如何您都没有使用它的结果。来自 Ajax 调用的呈现网页被丢弃了。 ajax 调用绝对没有任何用处。