Django & ajax like 按钮仅适用于第一项答案

【问题标题】：Django & ajax like button only works in first itemDjango & ajax like 按钮仅适用于第一项
【发布时间】：2017-11-14 16:54:35
【问题描述】：

早上好，我的点赞按钮出了点问题，它只对第一个项目有效，对其他项目无效

这是我的观点.py

@login_required
@require_POST
def like(request):
    if request.method == 'POST':
        user = request.user
        slug = request.POST.get('slug', None)
        tweet = get_object_or_404(Tweet, slug=slug)
        if tweet.likes.filter(id=user.id).exists():
            tweet.likes.remove(user)
            message = 'Your disliked this'
        else:
            tweet.likes.add(user)
            message = 'You liked this'
    ctx = {'likes_count': tweet.total_likes, 'message':message}
    return HttpResponse(json.dumps(ctx), content_type='application/json')

当我在第一个项目上单击“赞”按钮时，效果很好，但是当我在其他项目中单击“赞”按钮时，这不起作用。

我的模型.py

class Tweet(models.Model):
    user = models.ForeignKey(User, on_delete=models.CASCADE)
    title = models.CharField('Titulo', max_length=100)
    text = models.CharField(max_length=160)
    slug = models.SlugField(max_length=180)
    likes = models.ManyToManyField(User, related_name='likes')
    created_date = models.DateTimeField(auto_now_add=True)
    updated_date = models.DateTimeField(auto_now=True)

    @property
    def total_likes(self):
        return self.likes.count()

这是我的脚本 ajax：

<script type="text/javascript">
$("#like-button").click(function(e){
  e.preventDefault();
  $.ajax({
    type: 'POST',
    url: "/like/",
    data: {'slug': $(this).attr('name'), 'csrfmiddlewaretoken': '{{csrf_token}}'},
    dataType: "json",
    success: function(response){
      alert("This tweet has " + response.likes_count);
    },
    error: function(rs, r){
      alert(rs.responseText);
    }
  });
});

</script>

我的html按钮：

    <input
    type="button"
    id="like-button"
    name="{{tweet.slug}}"
    value="Like {{tweet.total_likes}}"
    class="btn btn-primary">

【问题讨论】：

你有什么错误吗？
不，控制台中没有错误，django 中没有错误现在才有效:(

标签： javascript jquery python ajax django

【解决方案1】：

如果你有多个输入，你应该使用一个类，而不是一个 id。

<input
type="button"
class="like-button"
name="{{tweet.slug}}"
value="Like {{tweet.total_likes}}"
class="btn btn-primary">

您还必须更新您的 ajax：

$(".like-button").click(function(e){

【讨论】：

如果每个按钮都针对特定的推文，则 ajax 应该在 for 循环中，并且您必须使用 {{forloop.counter}} 为输入传递 id
@mohammedqudah 不，ajax 不需要在 for 循环中。单个处理程序 $(".like-button").click(function(e){} 应该可以工作，因为处理程序使用 $(this).attr('name') 获取 slug。

【解决方案2】：

您有多个按钮，都具有相同的“like-button” id？如果是这种情况，请尝试删除 ID，因为从我在代码中看到的内容来看，它没有被使用。 ID 应该始终是完全唯一的。具有相同 ID 的多个元素通常会导致这样的问题。

【讨论】：