Как можно сделать vote-up-down кнопку как в Stackoverflow?

попытаться изменить заголовки запроса

<?php
header("Access-Control-Request-Headers: origin, x-requested-with");

...
?>
31
задан Jim G. 17 October 2009 в 15:14
поделиться

4 ответа

Это - грязная/нетестируемая теоретическая реализация с помощью jQuery/Django.

Мы собираемся предположить, что голосование вверх и вниз для вопросов/ответов как на этом сайте, но это может, очевидно, быть скорректировано к Вашему реальному варианту использования.

Шаблон

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

JavaScript

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

Представления Django

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

Черт. Когда я начал отвечать на этот вопрос, я не означал писать это очень, но я увлекся немного. Вы все еще пропускаете начальный запрос для получения всех голосов, когда страница сначала загружается и такой, но я оставлю это как осуществление читателю. Во всяком случае, если Вы на самом деле используете Django и интересуетесь более протестированным/реальным implemention голосования Stackoverflow, я предлагаю, чтобы Вы проверили исходный код для cnprog.com, китайского клона Stackoverflow, записанного в Python/Django. Они выпустили свой код, и это довольно достойно.

59
ответ дан 27 November 2019 в 21:56
поделиться

Я thnk ответы для этих вопросов должен жаждать stackoverflow.

Я рекомендовал бы хранить голоса в Базе данных.

Вы не упоминаете язык программирования серверной стороны.

дайте нам еще некоторую информацию

Это могло бы помочь Вам начать

0
ответ дан 27 November 2019 в 21:56
поделиться

Несколько точек никто не упомянул:

  • Вы не хотите использовать, ДОБИРАЮТСЯ при изменении состояния базы данных. Иначе я мог поместить изображение на свой сайт с src="http://stackoverflow.com/question_555/vote/up/answer_3/".
  • Вам также нужен csrf (Перекрестная Подделка Запроса Сайта) защита
  • Необходимо записать, кто делает каждое голосование для ухода от людей, голосующих несколько раз за конкретный вопрос. Является ли это IP-адресом или идентификатором пользователя.
8
ответ дан 27 November 2019 в 21:56
поделиться

Вы создаете кнопки, которые могут быть ссылками или изображениями или что бы то ни было. Теперь сцепите функцию JavaScript до события щелчка каждой кнопки. При нажатии функция стреляет и

  • Отправляет запрос к серверному коду, в котором говорится, более или менее, +1 или-1.
  • Серверный код вступает во владение. Это будет варьироваться дико, в зависимости от какой платформы Вы используете (или делаете не), и набор других вещей.
  • Код подключает к базе данных и выполнениям запрос к +1 или-1 счет. То, как это происходит, будет варьироваться дико в зависимости от Вашего проектирования баз данных, но это будет что-то как UPDATE posts SET score=score+1 WHERE score_id={{insert id here}};.
  • В зависимости от того, что говорит база данных, сервер возвращает код успеха или код неисправности как ответ запроса Ajax.
  • Ответ отправляется в Ajax, асинхронно.
  • Функция отклика JS обновляет счет, если это имеет успех код, отображает ошибку, если это - отказ.

Можно сохранить код в переменной, но это сложно и зависит от того, как хорошо Вы знаете семантику среды выполнения своего кода. Это в конечном счете должно быть продвинуто к персистентному устройству хранения данных так или иначе, так использование базы данных 100% является хорошим начальным решением. Когда время для оптимизации производительности настает, существует достаточно программного обеспечения в мире для кэширования запросов базы данных, чтобы заставить Вас чувствовать себя одурманенными поэтому дело не в этом большой соглашение.

3
ответ дан 27 November 2019 в 21:56
поделиться
Другие вопросы по тегам:

Похожие вопросы: