如何在不手动刷新的情况下自动重新加载 div 内容？

Question

我已根据响应要求对您的所有建议进行了一些编辑，现在工作正常。现在我遇到的问题是与帖子相关联的类似按钮。我试图用数据识别它们- id 属性，但每次我单击特定按钮时它只会在第一个 P 标签中更新喜欢计数。在数据库中，除了使用 data-id 来区分之外，它也只影响第一个帖子。我不确定我对 data-id 的使用因为这是我第一次尝试它。如果有错误，请纠正我，并帮助我将更新 likescount 操作与每个循环按钮相关联。我将更新我的代码示例以及我在控制台上得到的响应。请帮帮我。

登录控制台

(3) [{…}, {…}, {…}]0：{_id：“5b2673ed3e6a8e0c749b4c32”，正文： “kjhdishduishduihsduishduishdui shdishduihsuids...opdksaodkjsa ↵dskjdiosajd ↵dsjadoisad ↵dsaoijdisa”，作者：“5b206e07e850480d50861f75”，标题：“测试喜欢的简单帖子”，__v：0，...}1：{_id：“5b2073b7517e2b1760ffbbfd”， 身体：“Quisque velit nisi, pretium ut lacinia in, element...da. Cras ultricies ligula sed magna dictum porta。”，作者： “5b206e07e850480d50861f75”，标题：“nodejs”，__v：0，...}2：{_id： “5b2073ad517e2b1760ffbbfc”，正文：“Quisque velit nisi，pretium ut lacini in，元素……da。 Cras ultricies ligula sed magna dictum 端口。”，作者：“5b206e07e850480d50861f75”，标题：“测试”，__v：0，...}

main.js

$('.likeicon').on('click',() => {
     var id = $('.likeicon').attr('data-id');
    $.ajax({
      url:'/forum/addlikes/'+id,
      method:"POST"
    });
  });
  refresh();
});

function refresh(){
  $.ajax({
   url: "/forum/getlikes/",
   contentType: "application/json",
   method: "GET",
   success: function(response) {
     // console.log(response);
     $.each(response, function(index) {
  // console.log(response[index].likes);
  $(".likes-" + response[index]._id).first().html( response[index].likes );
});
   setTimeout(refresh, 500);
 }
});
}

index.pug

    extends layout

block content


  h1 #{title}
  ul.list-group
    each post, i in posts
      li.list-group-item
        a(href="/forum/"+post._id+"?"+post.author)= post.title
        div #{post.body}
        button(data-id=post._id class='likeicon' value=post._id)  LIKE
        p(class='likes-'+post._id)

post_routes.js

router.get('/getlikes/',(req,res) => {
  Post.find({},(err, posts) => {
    if(err){
      console.log(err);
    } else {
      posts = posts.slice(0).reverse();
      res.send(posts);
    }
  });
})

router.post('/addlikes/:id',(req,res) => {
  Post.findById(req.params.id,(err,post) => {
    if(err) throw err;
    else{
      post.likes+=1;
      post.save((err) =>{
        if(err) throw err;
        else{
          console.log(post.likes);
        }
      });
    }
  });

});

请单独帮我解决这个问题。我快完成了。提前致谢。

Answer 1

如果您不断发送“垃圾邮件”请求，一些请求会比 500 慢， 这意味着很快您将同时运行请求。 我会将您的刷新更改为仅在成功响应后发送新请求。

function refresh() {
  $.ajax({
    url: "/getlikes",
    contentType: "application/json",
    method: "GET",
    success: function(response) {
      setTimeout(refresh, 500);
    }
  });
}

哦，jquery 实际上有一个快捷方式：

$.getJSON( "/getlikes" + id, function( response ) {
    setTimeout(refresh, 500);
});

---

在 HTML 中，始终确保您的 id 是唯一的。它现在才起作用，因为浏览器对你很好。 document.getElementById('likes') 这将始终找到相同的单个标签，即使您有很多标签。您可以使用$('.cssSelector') 使用 jquery 查找许多元素。

您可以将您的 id 添加到一个类中，例如：p(class='likes-' + post._id)，但是使用数据属性将您的数据附加到一个元素是很流行的。 How to get the data-id attribute? CSS-classes 毕竟有不同的目的。

并用一个 json 返回您喜欢的所有内容：

[ { id: "id1", likes: 15 }, { id: "id2", likes: 15 }];

那么当你收到它们时：

// 不太确定响应的样子，但可能是这样的？

response.data.forEach( function( item ){
    $(".likes-" + item.id).first().html( item.likes ); // .html() is how jQuery does .innerHtml
});

我也在这里猜测，但在服务器端可能是这样的：

router.get('/getlikes',(req,res) => {
  Post
    .find({})
    .select("_id likes")
    .sort({likes:-1})
    .limit(5)  // sort by likes and add limit for a "top5"
    .lean()
    .exec(err,posts) => {
      if(err) throw err;
      else {
        res.send( posts ) ;
      }
    }
  })
})

这里有很多猜测，因为我目前无法对其进行测试。对此感到抱歉。不过应该差不多吧，说不定至少能给你一些思路。