向上或向下投票实时的jQuery的Ajax PHP

本文介绍了向上或向下投票实时的jQuery的Ajax PHP的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

好了，下面是我在做什么的简单说明：我有一个网站，人们可以投票向上或向下一个冠军。这些冠军开始与100的健康。如果你要参加投票的具体冠军，他们的健康现在是101 DOWN投票这将是99。

这个网站是启动和运行，现在已经有5个赛季（有超过1200个成员，发挥）。因此，有很多投票的一次事情。这一切现在工作正常。但是，对于这个下个赛季，我将实施的jQuery / AJAX的实时投票（使页面不需要刷新每次投票的时间）。

我有，现在有，这是，第一关的斗争，我不是伟大的AJAX / JS。然而，主要的问题是当有人点击一票，我需要一种方法来抓取从数据库的实时数据，然后抛出一个进入的jQuery / AJAX查询，然后再输出的真实数据，实时（或至少我觉得这是应该做的）。

还有一个第二部分，这个......人们可以投票每小时3倍。有一个通知，在页面的顶部显示他们他们有多少票离开，你有3个动作剩下的。这又是，优良的工作原样，但我想将需要与阿贾克斯固定是实时的为好。

我希望我解释说这不够好。如果没有，请让我知道！任何帮助将大大AP preciated！

code：

  $（a.vote愈合）。点击（函数（）{
    VAR票;
    VAR冠军;
    VAR健康;
    冠军= $（本）.attr（'身份证'）;

    。票= $（＃votesLeft）文本（）;
    votes--;

    //主ajax请求
    $ .getJSON（/负载champ.php？冠军=+冠军，功能（数据）{
        $每个（数据，功能（我的数据）{
            健康= data.health;
            健康++;
        }）;
        $阿贾克斯（{
            键入：POST，
            网址：/votes.php
            数据：冠军=+冠军+＆放大器;行动=治愈，
            成功：函数（MSG）{
                $（'＃'+冠军+。健康，内心）HTML（健康）;
                $（'＃标题.vote-保持）HTML（你有＆LT;强＆GT;＆LT;跨度ID =votesLeft＆GT;+投票+'＆LT; / SPAN＆GT;动作＆LT; / STRONG＆GT;其余'）。
                $（'＃'+冠军+.voting）HTML（'＆LT;一个ID ='+冠军+。'级=按钮票伤害的href =JavaScript的：;＆GT;伤害+冠军+'＆LT; / A＆GT;＆LT; DIV CLASS =按钮票医治动作提示＆GT;治愈'+冠军+'＆LT; / DIV＆GT;'）;
            }
        }）;
    }）;
}）;

解决方案

所有的这是使用JSON刚刚返回数据库查询。也许在后台有了两个动作 - 票，并刷新

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

然后，返回此数组：

项目
冠军票
投票离开
错误（如果存在）

在刷新方法（这将轮询后端服务器的每x秒或分钟数）返回的当前票数

一个比较容易实现AJAX的。

希望这有助于！

编辑：AJAX学习链接

使用jQuery的，它是超级，超级简单。具体方法如下：

http://api.jquery.com/jQuery.parseJSON/
http://api.jquery.com/jQuery.getJSON/
<一个href="http://php.net/manual/en/function.json-en$c$c.php">http://php.net/manual/en/function.json-en$c$c.php
官方网站： http://www.json.org/
http://www.hunlock.com/blogs/Mastering_JSON_(_JavaScript_Object_Notation_)

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.

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

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

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!

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

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.

A fairly easy implementation of ajax.

Hope this helps!

EDIT: AJAX learning links

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-encode.php
Official website: http://www.json.org/
http://www.hunlock.com/blogs/Mastering_JSON_(_JavaScript_Object_Notation_)

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