[英]UP or DOWN Voting in Real-Time jQuery Ajax PHP
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.
这些冠军以100点生命值开始。 If you were to UP vote a specific champion, their health would now be 101. DOWN voting it would be 99.
如果您要对某个特定冠军进行UP投票,那么他们的健康状况现在将是101。DOWN表决将是99。
This site is up and running and has been for 5 seasons now (there's over 1200 members that play). 这个网站已经建立并运行,已经有5个赛季了(有1200多名成员在玩)。 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).
但是,在下一个赛季,我将实现“实时”投票的jquery / ajax(因此,您不必在每次投票时刷新页面)。
The struggle I am having right now with this is, first off, I am not great with ajax/js. 首先,首先,我对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).
但是,主要问题是,当有人单击表决时,我需要一种方法来从数据库中获取LIVE数据,然后将其扔到jquery / ajax查询中,然后实时输出实际数据(或者至少是我觉得这是应该做的)。
There is also a second part to this...people are allowed to vote 3x per hour. 还有第二部分...人们每小时可以投票3次。 There is a notification at the top of the page showing them how many votes they have left, "You have 3 actions remaining."
页面顶部会显示一条通知,显示他们还剩多少票,“您还有3个动作。” 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.
同样,它仍然可以正常工作,但是我想也需要将其与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>');
}
});
});
});
All of this is just database queries that are returned with JSON. 所有这些只是使用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.
如果还剩下票数,则使冠军的分数上升或下降。
Then, return this array: 然后,返回此数组:
In the refresh method (which would poll the backend server every x number of seconds or minutes) return the number of current votes. 在refresh方法(它将每隔x秒或分钟x轮询后端服务器)中,返回当前投票数。
A fairly easy implementation of ajax. 一个相当简单的ajax实现。
Hope this helps! 希望这可以帮助!
EDIT: AJAX learning links 编辑:AJAX学习链接
With jQuery, it is super, super easy. 使用jQuery,它超级简单。 Here's how:
这是如何做:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.