为什么我的 Django jQuery 按钮不起作用？

Question

我对 jQuery 非常陌生，并试图制作一个简单的应用程序，允许人们使用 Ajax 调用来喜欢照片。以下是相关部分：

照片.html：

{% if pic %}

<img class="pic" src="/static/assets/{{pic}}" />
<br />

{% csrf_token %}
<input type="button" id="like" name="like" value="Like" />

<p id="likes"> </p> people liked this
{% endif %}

views.py

def like_photo(request, pic_id):
    if request.method == 'POST':
        if pic_id:
            uid = request.user.id
            p=UserPic.objects.get(id=pic_id)

            if Liker.objects.filter(user=uid, pic=pic_id):

                p.likes -=1
                p.save()
                Liker.objects.filter(user= uid, pic=pic_id).delete()
            else:

                p.likes +=1
                p.save()
                newliker = Liker(user= uid, pic=pic_id)
                newliker.save()
            args = {}
            args.update(csrf(request))
            args['likes']= p.likes
        return render_to_response('photo.html', args)

like.js

$(function(){

    $('#like').click(function() {
        var $this = $(this);
        var post_id = this.id;
        $.ajax({
            type: "POST",
            url: "'/photo/like/'+ post_id",
            data: { 
                'csrfmiddlewaretoken' : $("input[name=csrfmiddlewaretoken]").val()
            },
            success: likeSuccess,
            dataType: 'html'
        });

    });

});

function likeSuccess(data, textStatus, jqXHR)
{
    $('#likes').html(data);
}

我可以在 Firebug 中看到页面上加载了 jQuery 和 like.js，但是根据 Firebug 的 XHR，单击 like 按钮没有任何效果。

应用程序在没有 AJAX 调用的情况下运行良好，也就是说，当我在模板中使用简单的锚点时：

<p><a href="/photo/like/{{pic.id}}">Like</a></p>

Answer 1

您的代码中有一个小（但很重要！）错误

"'/photo/like/'+ post_id" 不正确，您需要"/photo/like/" + post_id。请注意，它并非全部用引号括起来

Answer 2

好吧，我设法像这样开始工作：

照片.html：

{% if pic %}


<script>
$(document).ready(function(){

    $('#like').click(function() {

        var $this = $(this);
        var post_id = {{pic.id}};

        $.ajax({
            type: "POST",
            url: "/photo/like/" + post_id ,
            data: { 
        'pic_id': post_id,
                'csrfmiddlewaretoken' : $("input[name=csrfmiddlewaretoken]").val()
            },
            success: likeSuccess,
            dataType: 'html'    
        });            
    });    
});

function likeSuccess(data, textStatus, jqXHR)
{     
    $('#likes').html(data);
}

</script>

<img class="pic" src="/static/assets/{{pic}}" />
<br />

{% csrf_token %}
<input type="button" id="like" name="like" value="Like" />

<p id="likes"> {{pic.likes}} &nbsp;liked this </p>

{% endif %}

views.py

def like_photo(request, pic_id):
    if request.method == 'POST':
        if pic_id:
            uid = request.user.id
            p=UserPic.objects.get(id=pic_id)

            #if UserPic.objects.filter(liked_by__user__contains=uid):
            if Liker.objects.filter(user=uid, pic=pic_id):
                #return HttpResponse('You have already liked!')

                p.likes -=1
                p.save()
                Liker.objects.filter(user= uid, pic=pic_id).delete()
            else:

                p.likes +=1
                p.save()
                newliker = Liker(user= uid, pic=pic_id)
                newliker.save()

            args = {}
            args.update(csrf(request))
            args['likes'] = p.likes

        return render_to_response('userpics/likes.html', args)

还需要为ajax调用创建一个特定的html：

likes.html

{% if likes > 0 %}
{{likes}} liked this
{% else %}
crap
{% endif %}  

不确定这是否是最好的方法，但它有效。 我希望我可以使用更优雅的 json 来返回 likes 数字并摆脱 likes.html 但不知道该怎么做。

此外，由于某些奇怪的原因，当我在 base.html 外部导入脚本时，该脚本不起作用：

<script src="{% static "assets/js/likes.js" %}"></script>

虽然萤火虫说它是在页面上加载的。

欢迎您提出改进答案的建议。