Question

因此，我正在jQuery中执行GET请求，对于某些请求，它正好执行两次。第一次获取适当的数据，第二次获取空对象。由于该空对象正被传递到EJS文件中，因此我的代码抛出了错误。我真的不明白为什么会这样。我试图捕获空对象，但这使我的Web应用程序挂起。我试图绑定和单击事件，但无济于事。这是它正在产生的输出以及我编写的代码。感谢您的帮助

输出：

[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;

    });

Node 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调用绝对没有用。

我的GET请求执行了两次

1 个答案: