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

我对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 %}

{% 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 %}

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>

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

---

“'/photo/like/'+post\u id”

不正确，您需要

“/photo/like/”+post\u id

。请注意，它并不是被引号包围着的。好吧，我是这样开始工作的：

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 %}

{% 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 %}

还需要为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>

尽管firebug说它已加载到页面上

---

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

刚刚注意到一个错误，

“/photo/like/'+post\u id”

不正确，您需要

“/photo/like/”+post\u id

。请注意，它并不是全部由quotes@Eru这几乎可以肯定是问题所在，你应该把它作为答案张贴出来。@DanielRoseman显然这不是唯一的问题。Firebug称，该按钮仍然不发送post请求。在更正了您提到的行之后，该按钮似乎在浏览器上工作。谢谢但这仍然不会影响喜欢的数量。在firebug中，当我单击按钮时，似乎没有任何内容被传递到视图。嗯，您应该对此感到满意。get（'id'）注意：由于Django 1.7+中的util中删除了simplejason，因此您需要简单地“导入json”而不是“forom Django.util导入simplejason”