对nodejs服务器的jquery ajax请求仅适用于页面刷新

Question

我对 AJAX 很陌生，我不确定自己做错了什么。我有一个网页，可以通过 AJAX 获取请求获取帖子上的所有 cmets。问题是AJAX请求只有在网页刷新后才能成功。我禁用了缓存以查看是否可以解决问题，但它没有。

例如，当我从帖子 A 刷新页面后获取第一个 cmets，然后转到网站上的帖子 B，帖子 A 中的 cmets 显示为帖子 B 的 cmets，然后当我刷新页面时帖子 B 的 cmets 已成功替换为帖子 B 的 cmets。

我正在使用 jQuery 发出请求：

$.ajax({
    type: "GET",
    url: someURL,
    success: (comments) => {
        console.log(comments);
    
        comments.questions.forEach(questionComment => {
            $('.questionComments').append(
                `<div class="comment">
                    <p>${questionComment.content}</p>
                </div>
                `
            )
        });
    
    
        comments.answers.forEach(answer => {
            answer.forEach(answerComment => {
                $(`.answer#${answerComment.forId} .answerComments`).append(
                    `<div class="comment">
                    <p>${answerComment.content}</p>
                </div>
                `
                )
            })
        })
    },
    cache: false
})

服务器端：（express.js、猫鼬）

let allComments = {}
app.get('/questions/:questionID/getComments', (req, res) => {

       if (err) return console.error(err)

    Comment.find({ forQuestion: true, forId: req.params.questionID }, (err, questionComments) => {
        allComments['questions'] = questionComments 
    })


    Answer.find({ questionId: req.params.questionID }, (err, answers) => {
        if (err) return console.error(err);
        allAnswerComments = []
        answers.forEach(answer => {
            Comment.find({ forAnswer: true, forId: answer._id }, (err, comments) => {
                allAnswerComments.push(comments)
            })
        });

        allComments['answers'] = allAnswerComments

    })

    res.send(allComments)

})

commets 对象在重新加载之前的样子 - 一个空白对象

重新加载后cmets对象的样子

当您导航到不同的帖子/不同的 URL 时，上一个帖子/URL 中的对象是新帖子的初始对象，然后当您重新加载页面时，会获取正确的对象。

Answer 1

根据您的描述，AJAX 请求在执行时有效，但问题是它仅在页面加载时执行一次。让我们为此目的编写一个函数：

function sendAJAX() {
$.ajax({
    type: "GET",
    url: someURL,
    success: (comments) => {
        console.log(comments);
    
        comments.questions.forEach(questionComment => {
            $('.questionComments').append(
                `<div class="comment">
                    <p>${questionComment.content}</p>
                </div>
                `
            )
        });
    
    
        comments.answers.forEach(answer => {
            answer.forEach(answerComment => {
                $(`.answer#${answerComment.forId} .answerComments`).append(
                    `<div class="comment">
                    <p>${answerComment.content}</p>
                </div>
                `
                )
            })
        })
    },
    cache: false
})
}

并确保定期调用它：

sendAJAX();
seInterval(sendAJAX, 10000);

这仍然是不正确的，因为它会每十秒添加一次所有 cmets。为了改善这一点，您可以添加一个表示最后一个请求的时刻的值，并在服务器端仅加载在该时刻和当前请求之间创建的 cmets。

Answer 2

您能否描述一下您在获取参数方面的工作，您是如何设置它的。是否涉及任何 cookie？告诉 get 评论肯定会帮助我们弄清楚我们的问题如何 sendAjax() 函数将是一个好主意，而不是在开放脚本中编写 ajax。 另一方面，我永远不会推荐你 seInterval(sendAJAX, 10000);而是安装一个服务工作者并在添加新评论时从您的 API 中回击它。然后它应该只获取最后一个并将其放在您的评论部分。

Answer 3

根据您的描述，主要问题似乎是帖子 A 的评论出现在帖子 B 的评论中。

现在，提供的数据很少，通过查看您的代码，我假设您在从帖子 A 切换到帖子 B 时没有以编程方式刷新页面。

所以，问题的根本原因是追加。您正在将数据附加到您的 div 中。因此，在你的 foreach 循环之前，首先使用清除 html

$('.questionComments').html("")

对于答案替换如下

comments.answers.forEach(answer => {
        let first = true;
            answer.forEach(answerComment => {
            if(first) {
              $(`.answer#${answerComment.forId} .answerComments`).html("")
              first = false;
            }
            
                $(`.answer#${answerComment.forId} .answerComments`).append(
                    `<div class="comment">
                    <p>${answerComment.content}</p>
                </div>
                `
                )
            })
        })

上面的sn-p只是为了说明你必须识别第一条评论是什么时候添加的，然后重置它。

我还没有测试过 sn-p，但我希望你知道代码中有什么问题。