【问题标题】:Django star rating system and AJAXDjango 星级评分系统和 AJAX
【发布时间】:2011-02-12 19:28:00
【问题描述】:

我正在尝试在 Django 网站上实现星级评分系统。

在我的模型中存储评分是排序的,在页面上显示分数也是如此。但我希望用户能够在不刷新或更改页面的情况下对页面进行评分(基本上从 1 到 5)。

我找到了以下,并喜欢这里的星星的风格:http://jvance.com/blog/2008/09/22/JQueryRaterPluginNew.xhtml

目前对 javascript 和 AJAX 的了解有限。有谁知道如何将上述示例中的星星与 AJAX 和 Django 结合使用,以便在用户选择评分时无需刷新页面即可更新数据库(模型)?

同样重要的是,用户只能投票一次,即不允许他们对页面进行两次评分。它存储在模型中他们是否已经投票以及他们之前的投票是什么。但是我怎样才能修改星星来显示这个呢?


所以如果你知道如何做这些事情,或者更合适的星级图形解决方案,或者任何好的教程......请分享。谢谢。

【问题讨论】:

    标签: python ajax django jquery rating-system


    【解决方案1】:

    AJAX 听起来令人恐惧和困惑,但并非必须如此。本质上,您想要做的是将一些数据发布到特定的 url/view 组合。有关使用 AJAX 向服务器发送数据的更多信息,请参阅jQuery.post

    #urls
    urlpatterns += patterns('',
    url(r'^article/rate/', 'article.rate'),
    
    #views 
    def rate(request):
        if request.method == 'POST':
           # use post data to complete the rating..
    
    #javascript
    $.post("/article/rate", { rating: 3, article: 2 },
        function(data) {
           // success! so now set the UI star to 3
    });
    

    据我所知,星级评分是通过无线电控制和 css 生成的。因此,如果您想在页面加载时显示每个用户的当前评分,只需让您的模板使用 checked 选项呈现关联的收音机。

    【讨论】:

    • 谢谢。我现在都整理好了。我想我只是需要了解整个 AJAX 的事情。
    【解决方案2】:

    Jonathan,欢迎来到 django 世界。由于 Django 是一个很酷的框架,一些 djangonauts 编写了不错的网站来帮助我们。

    如果您转到http://djangopackages.com/categories/apps/ 并搜索“评级”,您会发现一些 django 可插入的示例,这些示例将对您的项目有很大帮助。

    还可以在另一个问题中查看这些实用答案:Best Practices: How to best implement Rating-Stars in Django Templates

    【讨论】:

      【解决方案3】:

      最近正在处理这个问题,所以我想我会提供一个解决方案。首先,我使用的是 RateIt,我发现它的设置非常简单,使用起来也非常直观(将 RateIt *.js.*css 文件添加到您的 base.html 模板中):

      http://www.radioactivethinking.com/rateit/example/example.htm

      以下是我的解决方案的关键部分:

      urls.py

      url(r'^object/rate/$', RateMyObjectView.as_view(), name='rate_my_object_view'),
      

      my_template.html

      <div class="rateit" data-rateit-resetable="false">Rate it!</div>
      

      ajax.js

      $('.rateit').bind('click', function(e) {
      
          e.preventDefault();
      
          var ri = $(this);
          var value = ri.rateit('value');
          var object_id = ri.data('object_id');
      
          $.ajax({
              url: '/object/rate/?xhr',
              data: {
                  object_id: object_id,
                  value: value
              },
              type: 'post',
                  success: function(data, response) {
                  console.log("ajax call succeeded!");
              },
                  error: function(data, response) {
                  console.log("ajax call failed!");
              }
          });
      });
      

      一些视图位来自 James Bennett(例如设置 xhr):

      http://www.b-list.org/weblog/2006/jul/31/django-tips-simple-ajax-example-part-1/

      views.py

      from django.views.generic.base import View
      from .models import MyObject
      
      class RateMyObjectView(View):
      
          def post(self, request):
      
              my_object = MyObject.objects.all().last()
      
              xhr = 'xhr' in request.GET
              star_value = request.POST.get('value', '')
      
              my_object.score = star_value
              my_object.save()
      
              response_data = {
                  'message': 'value of star rating:',
                  'value': star_value
              }
      
              if xhr and star_value:
                  response_data.update({'success': True})
      
              else:
                  response_data.update({'success': False})
      
              if xhr:
                  return HttpResponse(json.dumps(response_data), content_type="application/json")
      
              return render_to_response(self.template_name, response_data)
      

      models.py

      from django.db import models
      
      class MyObject(models.Model)
          score = models.FloatField(max_length=1, default=0)
      

      请记住,这是一个幼稚的解决方案,只是简单地替换了对象列表中最后一项中的当前星级。这并不理想,因为最好将分数存储为自己的模型并链接到对象。这是你可以存储它们并进行平均等计算。我现在正在处理这个问题,完成后会更新这个答案。

      【讨论】:

        猜你喜欢
        • 2022-01-06
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2023-03-31
        • 1970-01-01
        相关资源
        最近更新 更多