Django Make Button Ajax

Question

我有一个增加投票的按钮。 我想用ajax制作按钮，这样它就不会重新加载页面。 我正在尝试遵循此操作 ，但是我的按钮使用了<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();
    });
});

当前错误：

点击该页面仍在重新加载。 views.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">