Question

我是jQuery的新手，并尝试制作一个简单的应用程序，允许人们使用Ajax调用喜欢照片。以下是相关部分：

photo.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

好的，我可以这样开始工作：

photo.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.html但无法弄清楚如何这样做。

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

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

虽然firebug说它已加载到页面上。

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

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

2 个答案: