使用Django+Ajax添加Like按钮

2024-10-03 15:23:09 发布

您现在位置:Python中文网/ 问答频道 /正文

嗨,我创建了我的第一个项目像stackoverflow(问答)。我使用这个来自Tango和Djangohttp://www.tangowithdjango.com/book17/chapters/ajax.html的guid,用ajax添加like按钮。什么也没变。在控制台中看不到任何请求。我是Django的noob,这是我第一次接触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();
});
});

Tags: answerdivaddiddefaultdatadateif
1条回答
网友
1楼 · 发布于 2024-10-03 15:23:09

由于您是在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

^{pr2}$

相关问题 更多 >