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

时间:2018-06-17 13:02:51

标签: jquery node.js pug

我根据响应要求完成了所有建议并进行了一些编辑,现在工作正常。现在我遇到的问题是使用与帖子相关的类似按钮。我试图用数据识别它们 - 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);
        }
      });
    }
  });

});

请单独帮助我。我差不多完成了。谢谢。

1 个答案:

答案 0 :(得分:0)

如果你保持"垃圾邮件"请求,有些会慢于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 ) ;
      }
    }
  })
})
由于我目前无法测试,因此很多猜测在这里。对不起但它应该是接近的,也许它至少可以给你一些想法。