Question

我需要实现AJAX并且它的工作正常。但是，我在将ajax应用于模型的每个实例时遇到问题。它只是应用于顶级对象并在同一页面上应用ajax调用。对于其余的对象，当我点击链接时，它将我引导到新页面并向我显示我不想要的JSON对象。

Views.py

def upvote(request, post_id):

if request.method == "POST":
    p = get_object_or_404(Post, pk=post_id)
    p.upvote += 1
    p.save()
    return JsonResponse({'count':p.upvote })

if request.method == "GET":
    p = get_object_or_404(Post, pk=post_id)
    p.upvote += 1
    p.save()
    data = {
        'count' : p.upvote,
    }
    return JsonResponse({'count': p.upvote})

Urls.py

url(r'^(?P<post_id>[0-9]+)/upvote/$', views.upvote, name='upvote-detail'),

Views.html

<script>
    $(function(){
       $('#up_vote').click(function(e) {
          e.preventDefault();
          window.alert("hello");
          console.log("hello");


          $.ajax({
            url: $(this).attr('href'),
            type :'get' ,
            success : function (data){
              // alert('success');
              $('#upvote_count').html(data.count);
            },
            failure : function (data){
              alert('failure') ; 
            }
          }) ;  // ajax call 

       }); // upvote link call
</script>

<div id="columns">
    {% for post in object_list %}

        <div class="pin">
            <a href="/posts/{{ post.id }}/">

            <img src= "/static/media/{{post.image}}" />
            </a>
            <p>
                {{post.description}}
                (<a href="{% url "post-edit" pk=post.id %}">edit</a>)
            </p>


            <div style="float:left">
              <a href='{% url 'upvote-detail' post.id %}' id='up_vote'>Up vote  </a>
              <span id='upvote_count'> {{ post.upvote }} </span> 
            </div>


            <div style="float:right">
              <a href='{% url 'downvote-detail' post.id %}' id='down_vote'> Down vote </a>
              <span id='downvote_count'>{{post.downvote}}</span>
            </div>


        </div>
    {% endfor %}

    </div>

这是我的所有文件。目前AJAX调用工作正常。它只是在LOOP中应用于顶层（第一个）对象。对于剩余对象，当我单击链接时，它会将我呈现给新页面。有人能找出问题吗？谢谢，

Answer 1

问题是您的id对每个DOM元素都应该是唯一的...请改用class：

<a href='{% url 'upvote-detail' post.id %}' class='up_vote'>Up vote  </a>

$('a.up_vote').click(function(e) {...

https://softwareengineering.stackexchange.com/questions/127178/two-html-elements-with-same-id-attribute-how-bad-is-it-really

EDIT 从span中删除id并在ajax成功时使用此

$(this).siblings('span').html(data.count);

Ajax没有在FOR LOOP中处理其他模型实例（对象）

1 个答案: