Django星级评分系统和AJAX

Question

我正在尝试在Django网站上实现星级评分系统。在我的模型中存储评分并在页面上显示分数是可以实现的。但我希望用户能够在不刷新或更改页面的情况下对页面进行评分（基本上是从1到5）。

我找到了以下内容，并喜欢这里的星星样式：http://jvance.com/blog/2008/09/22/JQueryRaterPluginNew.xhtml

目前，我对JavaScript和AJAX只有有限的了解。有人知道如何将上面示例中的星星与AJAX和Django结合使用，以便在用户选择评分时无需刷新页面即可更新数据库（模型）吗？

用户只能投票一次非常重要，即他们不允许对页面进行两次评分。在模型中存储了他们是否已经投票以及他们之前的投票结果。但我该如何修改星星以显示这一点呢？

因此，如果您知道如何做到这些事情，或者有更合适的星级评分图形解决方案或任何好的教程......请分享。谢谢。

- Jon Cox

Answer 1

AJAX听起来很吓人和令人困惑，但其实并不需要。你想要做的就是将一些数据发布到特定的url/view组合。参见jQuery.post 了解更多有关使用AJAX向服务器发送数据的信息。

#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 属性）即可。

据我所知，星级评分通常使用单选按钮和 CSS 来创建。因此，如果您想在页面加载时显示每个用户的当前评分，请让模板将关联的单选按钮呈现为已选中状态（即添加 checked 属性）即可。

- Josh Smeaton

---

谢谢。我现在已经把它全部解决了。我想我只是需要理解整个AJAX的事情。 - Jon Cox

Answer 2

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

如果你前往http://djangopackages.com/categories/apps/并搜索“评分”，你会找到一些Django插件和示例，这些将对你的项目非常有帮助。

此外，请参见另一个问题中的这些实用答案：最佳实践：如何在Django模板中最好地实现评分星级

- panchicore

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

请记住，这只是一种天真的解决方案，它仅仅替换了对象列表中最后一项中的当前星级评分。这并不理想，因为最好将评分作为自己的模型存储并链接到对象。这样你就可以存储它们并进行平均值等计算。我正在处理这个问题，完成后会更新此答案。

- nicorellius