javascript - Django 制作按钮 Ajax

Question

我有一个可以增加点赞数的按钮。我想用ajax制作按钮，这样它就不会重新加载页面。我正在尝试关注this ，但我的按钮使用 <a type="button"> 。这是我的 html 的问题吗？

views.py

@login_required
def upvote(request):
    recommendation_id = None
    if request.method == 'GET':
        #recommendation_id = request.GET['recommendation_id']
        recommendation_id = request.POST.get('recommendation_id', False)
    upvotes = 0
    if recommendation_id:
        recommendation = coremodels.Recommendation.objects.get(id=int(recommendation_id))
        user = request.user
        recommendation.votes.up(user)
        upvotes = recommendation.votes.count()
    return HttpResponse(upvotes)

urls.py

url(r'^upvote/', coreviews.upvote, name='upvote'),

html:

<a type="button" id="upvotes" data-recommendation="{{ recommendation.id }}" href="{% url 'upvote' %}" class="btn btn-primary pull-right"><span class="glyphicon glyphicon-thumbs-up"></span>Upvote</a>

ajax.js

$('#upvotes').click(function(event){
    event.preventDefault();
    var recommendation = $(this).attr("data-recommendation");
    $.get('/upvote/', {recommendation_id: recommendation}, function(data){
               $('#upvotes').hide();
    });
});

当前错误:

点击后页面仍在重新加载。 View .py request.GET['recommendation_id']不成功。

Answer 1

您的页面正在重新加载，因为您有 event.preventDefault 但它未附加到任何事件。你必须像我下面那样输入函数

$('#upvotes').click(function(event){
    event.preventDefault();
    var recommendation = $(this).attr("data-recommendation");
    $.get('/upvote/', {recommendation: recommendation}, function(data){
               $('#like_count').html(data);
               $('#upvote').hide();
    });
});

或者删除所有事件并在函数底部使用return false。

$('#upvotes').click(function(){
    var recommendation = $(this).attr("data-recommendation");
    $.get('/upvote/', {recommendation: recommendation}, function(data){
               $('#like_count').html(data);
               $('#upvote').hide();
    });

    return false;
});

此外，您的赞成按钮标记中没有 data-recommendation 属性。如果您查看您尝试使用的示例，您会发现作者在这一行中有这样的内容:

<button id="likes" data-catid="{{category.id}}" class="btn btn-primary" type="button">