javascript - 使用 Django + Ajax 添加“赞”按钮

Question

您好，我创建了我的第一个项目，例如 stackoverflow(问题-答案)。我使用 Tango 和 Django http://www.tangowithdjango.com/book17/chapters/ajax.html 中的这个指南使用ajax添加点赞按钮。但什么也没发生。在控制台中看不到任何请求。我是 Django 菜鸟，这是我第一次接触 jquery。

apps/questions/models:

class Answer(models.Model):

    text = models.TextField()
    date = models.DateTimeField(default=datetime.datetime.now)
    likes = models.IntegerField(default=0)
    resolve = models.IntegerField(default=0)
    author = models.ForeignKey(CustomUser)
    question = models.ForeignKey(Question)

apps/questions/views:

@login_required
def add_like(request):

    ans_id = None
    if request.method == 'GET':
        ans_id = request.GET['answer_pk']

    likes = 0
    if ans_id:
        ans = Answer.objects.get(id=(int(ans_id)))
        if ans:
            likes = ans.likes + 1
            ans.likes = likes
            ans.save()

    return HttpResponse(likes)

apps/questions/ulrs: 
url:
   url(r'add_like/$', views.add_like, name='add_like'),

 question.html:
    {% for answer in answers %}
    <div class="container-fluid no-padding">
        {{ answer.text }}   
    </div>
    <div class="container-fluid  author-question">
    <p>posted: {{ answer.date.day|stringformat:"02d" }}.{{ answer.date.month|stringformat:"02d"}}.{{ answer.date.year}}</p>
    <p>by: {{ answer.author.username }}</p>
    </div>
    {% if user.is_authenticated %}
    <button class="btn btn-default" type="button" id="likes" data-ansid="{{ answer.id }}">
        like | <strong id="like_count">{{ answer.likes }}</strong>
    </button>
    {% endif %}

js/ajax.js:

    $('#likes').click(function(){
    var ansid;
    ansid = $(this).attr("data-ansid");
            $.get('/questions/add_like/', {answer_id: ansid}, function(data){
        $('#like_count').html(data);
    $('#likes').hide();
});
});

Answer 1

由于您在 for 循环中创建按钮，并以相同的方式命名它们，因此页面上有多个具有相同 id 的元素。因此，您会得到不可预测的结果。您应该为每个按钮提供自己的 id，或者更改 jQuery 选择器以根据适当的类选择按钮。

例如，您可以:

{% for answer in answers %}
    <div class="container-fluid no-padding">
        {{ answer.text }}   
    </div>
    <div class="container-fluid  author-question">
    <p>posted: {{ answer.date.day|stringformat:"02d" }}.{{ answer.date.month|stringformat:"02d"}}.{{ answer.date.year}}</p>
    <p>by: {{ answer.author.username }}</p>
    </div>
    {% if user.is_authenticated %}
    <button class="btn btn-default likes-button" type="button" data-ansid="{{ answer.id }}">
        like | <strong id="like_count">{{ answer.likes }}</strong>
    </button>
    {% endif %}
{% endfor %}

然后是 JavaScript

$('.likes-button').click(function(){
    var ansid;
    ansid = $(this).attr("data-ansid");
            $.get('/questions/add_like/', {answer_id: ansid}, function(data){
        $('#like_count').html(data);
    $('#likes').hide();
});
});