Javascript 你怎么能像Stackoverflow中那样做一个向上向下的投票按钮？

问题

如何制作Ajax按钮（向上和向下箭头），使数字可以增加或减少

如何将用户的操作保存到变量NumberOfVotesOfQuestionID

我不确定是否应该对变量使用数据库。不过，我知道还有一个更简单的办法来节省选票

您如何解决这些问题？

[编辑]

---

服务器端编程语言是Python。

我认为这些问题的答案是对stackoverflow的渴望

我建议将选票存储在数据库中

您没有提到服务器端编程语言

请给我们更多的信息

---

可能有助于您入门

您可以创建按钮，这些按钮可以是链接、图像或其他内容。现在，将JavaScript函数挂接到每个按钮的单击事件上。单击后，函数将激发并

• 将请求发送到服务器代码，该代码或多或少显示+1或-1
• 服务器代码接管。这将根据您使用（或不使用）的框架和一系列其他内容而大不相同
• 代码连接到数据库并运行一个查询，查询分数+1或-1。这将如何发生取决于您的数据库设计，但它将类似于

  updatepostset score=score+1，其中score\u id={{insert id here}

• 根据数据库的说法，服务器返回成功代码或失败代码作为AJAX请求响应
• 响应以异步方式发送到AJAX
• 如果是成功代码，JS响应函数将更新分数；如果是失败代码，则显示错误

---

您可以将代码存储在变量中，但这很复杂，取决于您对代码运行时环境语义的了解程度。无论如何，它最终都需要被推送到持久性存储，因此100%使用数据库是一个好的初始解决方案。当优化性能的时机到来时，世界上有足够的软件来缓存数据库查询，让您感到头晕目眩，所以这没什么大不了的。

这是一个使用jQuery/Django的肮脏/未经测试的理论实现

我们将假设上下投票是针对本网站上的问题/答案，但这显然可以根据您的实际使用情况进行调整

模板 Django视图

---

哎呀。当我开始回答这个问题时，我并不想写这么多，但我有点忘乎所以了。当页面第一次加载时，您仍然缺少获得所有投票的初始请求，但我将把它作为练习留给读者。无论如何，如果您实际上正在使用Django，并且对Stackoverflow投票的更经过测试/更真实的实现感兴趣，我建议您查看cnprog.com，这是一个用Python/Django编写的Stackoverflow的中文克隆。他们发布了他们的代码，这相当不错。

有几点没有人提到：

• 更改数据库状态时，您不希望使用GET。否则，我可以在我的站点上放置一个带有

  src=”的图像http://stackoverflow.com/question_555/vote/up/answer_3/“

• 你也需要
• 您必须记录每次投票的投票人，以避免人们对某个特定问题进行多次投票。无论是通过IP地址还是用户ID

---

感谢您的链接！服务器端编程语言是Python。-1：不需要详尽的可编译解决方案。伪代码或算法就足够了@PaoloBergantino告诉我们这是可能的。这应该在评论中。不过，至少在我看来，这不值得再投一次否决票。布拉沃：）回答得很好+从我这里得到1。

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

$(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);
                }
            });                
        }
    });
});

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?')