jquery - 使用 JQuery 和 AJAX 刷新 div 以在 Django 中显示新评级

Question

我是 django 的新手，找不到只刷新 div 的方法，而 div 显示我当前的星级评分。我的想法是，用户可以通过点击星标来查看平均评分和评分，点击后我希望星标显示新的平均评分而不刷新整个页面。

这是div:

<div id="rating">
    <div class="movierating" id="o_{{ object.id }}">
        <span style="display:none;">{{ object.rating_vote.get_rating }}</span>
        {{ object.rating_vote.get_rating }}
    </div>
</div>

而 javascript 是:

  <script type="text/javascript" charset="utf-8">
    $(document).ready(function() {  
         $('.movierating').each(function(index){
          $(this).raty({
            readOnly:  false,
            path: "{{ STATIC_URL }}images/",
            start: $(this).children("span:first").text(),
            click: function(score, evt) {
                var vote_url = "/rate/" + this.attr('id').substring(2) + "/" + score + "/";
                var div = this.attr('id');
                $.ajax({
                  url: vote_url,
                  success: function(){
                    alert('Vote successful!);
                $('#rating').load('#rating');
                  },
                });
            }
          });
        });
    });
  </script>

用这段代码

$('#rating').load('#rating');

我把整个页面放到div里，当我用的时候

$('#rating').load('#rating');

没有星星，我只得到值(value)。

Answer 1

首先，复制<div id="rating"></div>里面的代码并将其保存到另一个文件。比方说，

rating.html

 <div class="movierating" id="o_{{ object.id }}">
    <span style="display:none;">{{ object.rating_vote.get_rating }}</span>
    {{ object.rating_vote.get_rating }}
</div>

现在在您的页面中，它将是，

你的.html

............
<div id="rating">
    {% include 'rating.html' %}
</div>
............

然后，创建new view和 new url对于 rating.html

urls.py

url(r'^rating/$', 'rating', name='rating'),

views.py

def rating(request):
    //rating object here

    return render(request, 'rating.html', {
        //call rating object variable here
    })

最后，在你的 ajax 中

.........
$.ajax({
    url: vote_url,
    success: function(){
        alert('Vote successful!);
        $("#rating").load("/app_name/rating/");
    },
});
...........