实时jQuery Ajax PHP中的UP或DOWN投票

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.

好吧，这里有一个我正在做的事情的快速解释：我有一个网站，人们可以向上或向下投票给“冠军”。这些冠军以100健康开始。如果你要投票给一个特定的冠军，他们的健康状况现在是101. DOWN投票将是99。

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

这个网站已经启动并运行了5个季节（有超过1200个成员玩）。所以有很多投票同时进行。现在一切正常。但是，对于下一季，我将实施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).

我现在正在与之斗争的是，首先，我对ajax / js并不满意。但是，主要问题是当有人点击投票时，我需要一种方法从数据库中获取LIVE数据，然后将其放入jquery / 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.

还有第二部分......允许人们每小时投票3次。页面顶部有一条通知，显示他们剩下多少票，“你还有3个动作。”这再次，工作正常，但我想，需要修复ajax也是实时的。

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

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

CODE:

码：

$("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 个解决方案

#1

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

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

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.

在投票方法中，首先检查选民的当前计数。如果还有选票，请让冠军得分上升或下降。

Then, return this array:

然后，返回此数组：

List item
项目清单
Champions votes
冠军票
Votes left
投票离开了
Error (if exists)
错误（如果存在）

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

在刷新方法中（每x秒或几分钟轮询后端服务器）返回当前投票数。

A fairly easy implementation of ajax.

一个相当容易的ajax实现。

Hope this helps!

希望这可以帮助！

EDIT: AJAX learning links

编辑：AJAX学习链接

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

使用jQuery，它超级，超级简单。就是这样：

http://api.jquery.com/jQuery.parseJSON/
http://api.jquery.com/jQuery.parseJSON/
http://api.jquery.com/jQuery.getJSON/
http://api.jquery.com/jQuery.getJSON/
http://php.net/manual/en/function.json-encode.php
http://php.net/manual/en/function.json-encode.php
Official website: http://www.json.org/
官方网站：http：//www.json.org/
http://www.hunlock.com/blogs/Mastering_JSON_(_JavaScript_Object_Notation_)
http://www.hunlock.com/blogs/Mastering_JSON_(_JavaScript_Object_Notation_）

#1