<p>这是一个使用jQuery/Django的脏的/未经测试的理论实现。</p>
<p>我们假设上下的投票是针对像这个站点上的问题/答案的,但是这显然可以根据实际的用例进行调整。</p>
<h3>模板</h3>
<pre><code><div id="answer_595" class="answer">
<img src="vote_up.png" class="vote up">
<div class="score">0</div>
<img src="vote_down.png" class="vote down">
Blah blah blah this is my answer.
</div>
<div id="answer_596" class="answer">
<img src="vote_up.png" class="vote up">
<div class="score">0</div>
<img src="vote_down.png" class="vote down">
Blah blah blah this is my other answer.
</div>
</code></pre>
<h3>Javascript</h3>
<pre><code>$(function() {
$('div.answer img.vote').click(function() {
var id = $(this).parents('div.answer').attr('id').split('_')[1];
var vote_type = $(this).hasClass('up') ? 'up' : 'down';
if($(this).hasClass('selected')) {
$.post('/vote/', {id: id, type: vote_type}, function(json) {
if(json.success == 'success') {
$('#answer_' + id)
.find('img.' + vote_type);
.attr('src', 'vote_' + vote_type + '_selected.png')
.addClass('selected');
$('div.score', '#answer_' + id).html(json.score);
}
});
} else {
$.post('/remove_vote/', {id: id, type: vote_type}, function(json) {
if(json.success == 'success') {
$('#answer_' + id)
.find('img.' + vote_type);
.attr('src', 'vote_' + vote_type + '.png')
.removeClass('selected');
$('div.score', '#answer_' + id).html(json.score);
}
});
}
});
});
</code></pre>
<h3>Django视图</h3>
<pre><code>def vote(request):
if request.method == 'POST':
try:
answer = Answer.objects.get(pk=request.POST['id'])
except Answer.DoesNotExist:
return HttpResponse("{'success': 'false'}")
try:
vote = Vote.objects.get(answer=answer, user=request.user)
except Vote.DoesNotExist:
pass
else:
return HttpResponse("{'success': 'false'}")
if request.POST['type'] == 'up':
answer.score = answer.score + 1
else:
answer.score = answer.score - 1
answer.save()
Vote.objects.create(answer=answer,
user=request.user,
type=request.POST['type'])
return HttpResponse("{'success':'true', 'score':" + answer.score + "}")
else:
raise Http404('What are you doing here?')
def remove_vote(request):
if request.method == 'POST':
try:
answer = Answer.objects.get(pk=request.POST['id'])
except Answer.DoesNotExist:
return HttpResponse("{'success': 'false'}")
try:
vote = Vote.objects.get(answer=answer, user=request.user)
except Vote.DoesNotExist:
return HttpResponse("{'success': 'false'}")
else:
vote.delete()
if request.POST['type'] == 'up':
answer.score = answer.score - 1
else:
answer.score = answer.score + 1
answer.save()
return HttpResponse("{'success':'true', 'score':" + answer.score + "}")
else:
raise Http404('What are you doing here?')
</code></pre>
<p>是的。当我开始回答这个问题时,我并不打算写这么多,但我有点忘乎所以了。你仍然错过了一个在页面首次加载时获得所有选票的初始请求,但我将把它留给读者作为练习。不管怎样,如果您实际上是在使用Django,并且对Stackoverflow投票的更测试/实际的实现感兴趣,我建议您查看cnprog.com的{a1},这是用Python/Django编写的Stackoverflow的中文克隆。他们发布了他们的代码,这是相当体面的。</p>