使用 Jquery 的 Django ajax 'like' 按钮？

Posted 2023-02-24

【中文标题】使用 Jquery 的 Django ajax \'like\' 按钮？

【英文标题】：Django ajax 'like' button using Jquery?使用 Jquery 的 Django ajax 'like' 按钮？

【发布时间】：2011-09-03 16:11:11

【问题描述】：

我想实现一个 ajax 'like' 按钮，它应该增加点赞数而不是刷新整个页面。我是 ajax 新手，所以请帮忙。

urls.py:

(r'^like/(\d+)/$',like),

以下是我的观点代码：

def like(request,feedno):
  feed=Feed.objects.get(pk=feedno)
  t=request.META['REMOTE_ADDR']
  feed.add_vote(t,+1)
  vote, created = Vote.objects.get_or_create(

          feed=feed,
          ip=t,
          )

  feed.likecount+=1
  feed.save()
  if 'HTTP_REFERER' in request.META:
    return HttpResponseRedirect(request.META['HTTP_REFERER'])
  return HttpResponseRedirect('/')

下面是我的 html（比如 div）：

<div class="like_abuse_box">
  <p>Likes:<b>vote.feed_set.count</b> ||
   <a class="like" href="/like/feed.id/">Like</a> | 
   <a class="abuse" href="/abuse/feed.id/">Abuse</a> || </p>
</div>

我应该包含哪些代码才能仅刷新该特定 div 并更新类似计数，而不会重新加载整个页面。需要帮忙。谢谢。

【参考方案1】：

还没有测试过，虽然类似的东西应该可以工作。 编辑：经过测试并且可以工作，现在适用于网页上的多个元素

Javascript

$("a.like").click(function()
    var curr_elem = $(this) ;
    $.get($(this).attr('href'), function(data)
        var my_div = $(curr_elem).parent().find("b");
        my_div.text(my_div.text()*1+1);     
    ); 
    return false; // prevent loading URL from href
);

Django 视图

如果请求是 Ajax，您可以添加：

if request.is_ajax():

【讨论】：

它似乎有效。它不会刷新整个页面，但它会注入一些 nos，例如如果投票为 0，并且我单击它会将 0 替换为 '11364' 到所有类似的计数位置。所以所有的提要都得到这样的值（11364），只有在刷新后它们才会恢复到正常的likecounts。为什么会这样？需要帮助。

你确定吗？我已经编辑过一次，因为没有 *1 用于将文本转换为 int。它从 vote.feed_set.count 中获取数字，并在 ajax 请求完成后将其加一。

实际上我在循环中的提要中有like_abuse_box。所以有很多这样的盒子。所以当我喜欢所有其他盒子时，投票也会改变。如前所述，它们都更改为一些 6 位数字。问题仍然存在。知道为什么会这样..？谢谢。

@berni 我尝试使用您编写的 javascript，但在 javascript 没有起作用的意义上我遇到了问题。当我单击按钮时，这是一个简单的操作，而不是 javascript 采取的操作。我完全按照上面写的做了。你能帮我解决这个问题吗

谢谢你们！这正是我想要的！

【参考方案2】：

第一件事：在要注入内容的html元素上放一个id。

<div class="like_abuse_box">
  <p>Likes:<b id="like_count">vote.feed_set.count</b> ||
   <a class="like" href="/like/feed.id/">Like</a> | 
   <a class="abuse" href="/abuse/feed.id/">Abuse</a> || </p>
</div>

其次，在您看来，您需要返回最新的点赞数。您不能只在本地更新计数，因为其他人也有可能更新了点赞计数。

最后。在您的页面中包含 jquery

$("a.like").bind("click", function()
    var link = $(this).attr("href");
    $.get(link, function(data) 
        $(this).parent("div").children('b#like_count').html(data);
    );
);

我不太确定父子选择器，从超链接点击导航到其相应的喜欢计数。您可能必须使用 JQuery 选择器才能正确设置。

另外，如果您在视图中使用 POST，请将 $.get 替换为 $.post