使用Django + Ajax添加Like按钮

Add Like button with Django + Ajax

本文关键字：Like 按钮 添加 Ajax Django 使用      更新时间：2023-09-26

嗨，我创建了我的第一个项目像stackoverflow(问答)。我使用了这个向导从Django的Tango 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();
});
});

由于您在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();
});
});
相关文章：