Голосование ВВЕРХ или ВНИЗ в реальном времени JQuery Ajax PHP - PullRequest
2 голосов
/ 05 января 2012

Хорошо, вот краткое объяснение того, что я делаю: у меня есть веб-сайт, на котором люди могут голосовать за или против "чемпиона".Эти чемпионы начинают со 100 здоровья.Если бы вы проголосовали за определенного чемпиона, их здоровье теперь было бы 101. ВНИЗ, если бы он голосовал, это было бы 99.

Этот сайт запущен и работает уже 5 сезонов (более 1200 участников играют).Так что сразу происходит множество голосований.Теперь все отлично работает.НО, в следующем сезоне я буду внедрять jquery / ajax для голосования в режиме реального времени (поэтому страница не должна обновляться каждый раз, когда вы голосуете).

Борьба, с которой я сейчас сталкиваюсьс этим, во-первых, я не очень хорошо с AJAX / JS.Тем не менее, основная проблема заключается в том, что когда кто-то нажимает на голосование, мне нужен способ получить данные LIVE из БД, а затем выбросить их в запрос jquery / ajax, а затем вывести реальные данные в режиме реального времени (или, по крайней мере, ячувствую, что это то, что должно быть сделано).

Существует также вторая часть этого ... люди могут голосовать 3 раза в час.В верхней части страницы есть уведомление о том, сколько голосов они оставили: «У вас осталось 3 действия».Это снова, работает нормально, как есть, но я полагаю, что с ajax нужно будет поработать и в реальном времени.

Надеюсь, я объяснил это достаточно хорошо.Если нет, пожалуйста, дайте мне знать!Любая помощь будет принята с благодарностью!

КОД:

$("a.vote-heal").click(function(){
    var votes;
    var champ;
    var health;
    champ = $(this).attr('id');

    votes = $("#votesLeft").text();
    votes--;

    //the main ajax request
    $.getJSON("/load-champ.php?champ="+champ, function(data) {
        $.each(data, function(i,data) {
            health = data.health;
            health++;
        });
        $.ajax({
            type: "POST",
            url: "/votes.php",
            data: "champ="+champ+"&action=heal",
            success: function(msg) {
                $('#'+champ+' .health-inner').html(health);
                $('#header .vote-remain').html('You have <strong><span id="votesLeft">'+votes+'</span> Actions</strong> remaining');
                $('#'+champ+' .voting').html('<a id='+champ+'" class="button vote-hurt" href="javascript:;">Hurt '+champ+'</a><div class="button vote-heal action-tooltip">Heal '+champ+'</div>');
            }
        });
    });
});

1 Ответ

5 голосов
/ 05 января 2012

Все это просто запросы к базе данных, которые возвращаются с помощью JSON.Может быть, есть два действия в бэкэнде - голосование и обновление.

В методе голосования сначала проверьте текущий счет избирателя.Если осталось количество голосов, увеличьте или уменьшите счет чемпиона.

Затем верните этот массив:

  1. Элемент списка
  2. Голоса чемпионов
  3. Осталось голосов
  4. Ошибка (если существует)

В методе обновления (который будет опрашивать внутренний сервер каждые x секунд или минут) верните количество текущих голосов.

Довольно простая реализация ajax.

Надеюсь, это поможет!


РЕДАКТИРОВАТЬ: AJAX обучающие ссылки

СJQuery, это супер, супер легко.Вот как это сделать:

...