实时 jQuery Ajax PHP 中的 UP 或 DOWN 投票 [英] UP or DOWN Voting in Real-Time jQuery Ajax PHP

问题描述

好的，下面是我正在做的事情的简要说明:我有一个网站，人们可以在其中投票支持或反对冠军".这些冠军从 100 点生命值开始.如果你对一个特定的英雄进行 UP 投票，他们的生命值现在是 101.DOWN 投票是 99.

Alright, here's a quick explanation of what I am doing: I have a website where people can vote UP or DOWN to a "champion." These champions start with 100 health. If you were to UP vote a specific champion, their health would now be 101. DOWN voting it would be 99.

这个网站已经启动并运行了 5 个赛季(有超过 1200 名成员在玩).所以有很多投票同时进行.现在一切正常.但是，在下个赛季，我将实现 jquery/ajax 以进行实时"投票(因此页面不需要在您每次投票时刷新).

This site is up and running and has been for 5 seasons now (there's over 1200 members that play). So there's a lot of voting going on at once. It all works fine now. BUT, for this next season, I will be implementing jquery/ajax for "real-time" voting (so the page doesn't need to refresh every time you vote).

我现在遇到的困难是，首先，我对 ajax/js 并不擅长.但是，主要问题是当有人点击投票时，我需要一种方法来从数据库中获取实时数据，然后将其放入 jquery/ajax 查询中，然后实时输出真实数据(或至少我觉得这是应该做的).

The struggle I am having right now with this is, first off, I am not great with ajax/js. However, the main issue is when someone clicks a vote, I need a way to grab the LIVE data from the DB and then throw that into the jquery/ajax query and then output the real data, in real-time (or at least I feel this is what should be done).

还有第二部分……人们每小时可以投票 3 次.页面顶部有一条通知，显示他们还剩多少票，您还有 3 个操作."这又是一次，按原样工作正常，但我想还需要使用 ajax 进行修复才能实现实时性.

There is also a second part to this...people are allowed to vote 3x per hour. There is a notification at the top of the page showing them how many votes they have left, "You have 3 actions remaining." This is again, working fine as is, but I imagine would need to be fixed in with the ajax to be real-time as well.

我希望我解释得足够好.如果没有，请告诉我！任何帮助将不胜感激！

I hope I explained this well enough. If not, please let me know! Any help would be greatly appreciated!

代码:

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

推荐答案

所有这些都只是使用 JSON 返回的数据库查询.也许在后端有两个操作 - 投票和刷新.

All of this is just database queries that are returned with JSON. Maybe have two actions on the backend - vote and refresh.

在投票方法中，首先查看投票者当前的计数.如果还有票数，让冠军的分数上升或下降.

In the vote method, first check to see the voter's current count. If there are votes left, have the champion's score go up or down.

然后，返回这个数组:

1. 列表项
2. 冠军投票
3. 剩下的票
4. 错误(如果存在)

在刷新方法中(每 x 秒或分钟轮询一次后端服务器)返回当前投票数.

In the refresh method (which would poll the backend server every x number of seconds or minutes) return the number of current votes.

一个相当简单的ajax实现.

A fairly easy implementation of ajax.

希望这有帮助！

AJAX 学习链接

使用 jQuery，它超级、超级简单.方法如下:

With jQuery, it is super, super easy. Here's how:

• http://api.jquery.com/jQuery.parseJSON/
• http://api.jquery.com/jQuery.getJSON/
• http://php.net/manual/en/function.json-编码.php
• 官网:http://www.json.org/
• http://www.hunlock.com/blogs/Mastering_JSON_(_JavaScript_Object_Notation_)

这篇关于实时 jQuery Ajax PHP 中的 UP 或 DOWN 投票的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！