刷新div以使用JQuery和AJAX在Django中显示新评级 [英] Refresh a div to shows new rating in Django using JQuery and AJAX

问题描述

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

这是div：

 < div id =rating> 
< div class =movieratingid =o _ {{object.id}}> 
< span style =display：none;> {{object.rating_vote.get_rating}}< / span> 
 {{object.rating_vote.get_rating}} 
< / div> 
< / div> 
  

而javascript是：

 < script type =text / javascriptcharset =utf-8> 
 $（document）.ready（function（）{
 $（'。movierating'）。each（function（index）{
 $（this）.raty（{
 readOnly：false，
 path：{{STATIC_URL}} images /，
 start：$（this）.children（span：first）.text（），
 click：函数（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> 
  

使用此代码

<$ c

我把整个页面放到div中，当我使用

$（'＃rating'）。load（'＃rating'）;

我只在没有星星的情况下获得价值。 首先，复制代码放在< div id =rating>< / div> 内并保存到另一个文件中。可以说，

rating.html

 < div class =movieratingid =o _ {{object.id}}> 
< span style =display：none;> {{object.rating_vote.get_rating}}< / span> 
 {{object.rating_vote.get_rating}} 
< / div> 
  

现在在您的网页中，它会是

your.html

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

然后，创建新视图和新网址用于 rating.html

$ b

urls.py

  url（r'^评分/ $'，'评分'，名称='评分'），
  

py

  def评级（请求）：
 //评估对象
 
 return render（request，'rating.html'，{
 //在这里调用评级对象变量
}）
  

最后，在你的ajax中

  ......... 
 $ .ajax（{
 url：vote_url，
 success：function（）{
 alert（'Vote successful！）; 
 $（＃rating）。load （/ app_name / rating /）; 
}，
}）; 
 ........... 
  

I’m new to django and can’t find the way to refresh only the div and that the div shows me current rating with stars. My idea is that user can see average rating and rate something by clicking on the star, and after the click I want stars to show new average rating without refreshing the whole page.

This is the 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>

And javascript is:

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

With this code

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

I get the whole page into the div, and when I use

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

I get only value without the stars.

解决方案

First, copy the code inside the <div id="rating"></div> and save it to another file. Lets say,

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>

Now in your page, it will be,

your.html

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

Then, create new view and new url for 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
    })

Finally, in your ajax

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

这篇关于刷新div以使用JQuery和AJAX在Django中显示新评级的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！