Question

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

登录控制台

（3）[{...}，{...}，{...}] 0：{_ id：“5b2673ed3e6a8e0c749b4c32”，正文： “kjhdishduishduihsduishduishdui shdishduihsuidsuids ... 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 lacinia in，element ... da。 Cras ultricies ligula sed magna dictum porta。“，作者：”5b206e07e850480d50861f75“，标题：”test“，__ 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

如果你保持＆＃34;垃圾邮件＆＃34;请求，有些会慢于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 ) ;
      }
    }
  })
})

由于我目前无法测试，因此很多猜测在这里。对不起但它应该是接近的，也许它至少可以给你一些想法。

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

1 个答案: