一页多票

时间：2015-07-24 08:02:31

标签： php jquery ajax

我在页面上有多个图像。每张图片都有thumb up和thumb down，用户可以投票。 问题是当用户对第一张图像投票的投票被更改时，但当他点击第二张图像时，投票会保存在数据库中，但不会在页面上更新和更改。刷新页面时，更新投票计数器。

这些是图像的按钮和投票

$cookie_name = 'vote'.$row['image_id']; // Set up the cookie name           
$value = $pdo->prepare('SELECT * FROM tc_tuto_yt_voting_system WHERE image_id= ?'); // BDD query, page ID values
$value->bindParam(1, $row['image_id'], PDO::PARAM_INT);
$value->execute();
$vote = $value->fetch(); 
echo '      

if (isset($_COOKIE[$cookie_name])) { 
    echo '<div class="vote_up_done oneLine"></div>
          <div class="numberVoted oneLine">'.$vote['positive'].'</div>';
}
else 
{
    echo '<div class="vote_up oneLine" id="voteUp"><a href="#" onclick="vote(\'positive\', \'1\', '.$row['image_id'].'); return false;"></a></div>
          <div class="number oneLine" id="positive">'.$vote['positive'].'</div>';
}                       
if (isset($_COOKIE[$cookie_name])) {
    echo '<div class="vote_down_done oneLine"></div>
          <div class="numberVoted oneLine">'.$vote['negative'].'</div>';
}
else 
{ 
    echo '<div class="vote_down oneLine" id="voteDown"><a href="#" onclick="vote(\'negative\', \'1\', '.$row['image_id'].'); return false;"></a></div>
          <div class="number oneLine" id="negative">'.$vote['negative'].'</div>';
}

Vote up＆amp; down是ajax驱动所以这是ajax部分

    function vote(type, value, image_id) {
    var dataFields = {'type': type, 'value': value, 'image_id': image_id}; // We pass the 3 arguments, type: positive or negative ; value=1 ; pageId: here 5
    $.ajax({ // Ajax
        type: "POST",
        url: "ad_vot.php",
        data: dataFields,
        timeout: 3000,
        success: function(dataBack){
            $('#' + type).html(dataBack); // Change the new value in id="positive" or id="negative" DIV
            $('#voteUp').attr('class', 'vote_up_done oneLine'); // Change image by design/vote-up-done.png grey icon
            $('#voteDown').attr('class', 'vote_down_done oneLine'); // Change image by design/vote-down-done.png grey icon
            $('#positive').attr('class', 'numberVoted oneLine'); // Change the number's color by a grey one for the "positive" DIV
            $('#negative').attr('class', 'numberVoted oneLine'); // Change the number's color by a grey one for the "negative" DIV
            $('#message').html('<div id="alertFadeOut" style="color: green">Your vote is added!</div>'); // Diplay message with a fadeout
            $('#alertFadeOut').fadeOut(3000, function () {
                $('#alertFadeOut').text('');
            });
            },
        error: function() {
            $('#message').text('Vote fail. Please try again.');
        }
    });
}

更新：投票和更新

    if( $result > 0) {

    $query = $pdo->prepare('UPDATE tc_tuto_yt_voting_system SET '.$type.' = '.$type.' + 1 WHERE image_id= :image_id');
    $query -> execute(array(
            ":image_id"    => $_POST['image_id']               
    ));
}
else 
{
    $type = $_POST['type'];
    $value = $_POST['value'];
    $image_id = $_POST['image_id']; 

    $query = $pdo -> prepare("INSERT INTO tc_tuto_yt_voting_system (image_id,positive,negative)
                            VALUES (:image_id, :positive, :negative)");   
    $query -> execute(array(
                      ":image_id"           => $_POST['image_id'],
                      ":positive"          => '0',
                      ":negative"          => '0'
    ));     

    $query = $pdo->prepare('UPDATE tc_tuto_yt_voting_system SET '.$type.' = '.$type.' + 1 WHERE image_id= :image_id');
    $query -> execute(array(
            ":image_id"    => $_POST['image_id']               
    ));    
}

            $value = $pdo->prepare('SELECT * FROM tc_tuto_yt_voting_system WHERE image_id= ?'); // BDD query, page ID values
            $value->bindParam(1, $_POST['image_id'], PDO::PARAM_INT);
            $value->execute();
            $result = $value->fetch();   

    $expire = 24*3600; // 1 day
    setcookie('vote'.$image_id, 'voted', time() + $expire, '/'); // Place a cookie

    echo $result[$type];

1 个答案:

答案 0 :(得分：1)

更好的答案：

  • 不要将投票存储在cookie中。用户可以更改，删除它，并且他将能够再次投票。在数据库中创建一个表，并在用户投票时插入一行。
  • 请勿使用onclick属性。使用jQuery的.on/.bind/.click。
  • 如同您已经解释过的那样，页面上不能有2个或更多具有相同ID的元素。你需要使用类。
  • 正如我告诉过你的那样，除非你检查SET '.$type.' = '.$type.' + 1的值，否则不要使用$type。 $_POST['type']可以是positive = 1; DROP TABLE tc_tuto_yt_voting_system;。

如果投票需要注册：

CREATE TABLE user_votes (
  user_id INT(11) UNSIGNED NOT NULL,
  image_id INT(11) UNSIGNED NOT NULL,
  vote TINYINT(3) UNSIGNED NOT NULL
)

$user_votes = $db->prepare("SELECT image_id, vote FROM user_votes WHERE user_id = ?");
$user_votes->bindValue(1, $_SESSION["user_id"], PDO::PARAM_INT);

如果不是：

CREATE TABLE user_votes (
  user_ip VARBINARY(16) UNSIGNED NOT NULL,
  image_id INT(11) UNSIGNED NOT NULL,
  vote TINYINT(3) NOT NULL
)

$user_votes = $db->prepare("SELECT image_id, vote FROM user_votes WHERE user_id = INET6_ATON(?)");
$user_votes->bindValue(1, $_SERVER["REMOTE_ADDR"], PDO::PARAM_STR);

然后显示图像，并投票：

$user_votes->execute();
$u_votes = [];
while ($vote = $user_votes->fetch())
    $u_votes[$vote->image_id] = $vote->vote;
$images = $db->prepare("SELECT * FROM images");
$images->execute();
while ($img = $images->fetch())
{
    $is_voted = isset($u_votes[$img->id]);
    $vote = $is_voted ? ($u_votes[$img->id] ? "down" : "up") : "";
    echo '<img src="'.$img->filename.'" />
          <div class="vote" data-image-id="'.$img->id.'">
              <div class="vote_down'.($vote == "down" ? " voted" : "").'"></div>
              <div class="number positive">'.$img->positive.'</div>
              <div class="vote_up'.($vote == "up" ? " voted" : "").'"></div>
              <div class="number negative">'.$img->negative.'</div>
          </div>';
}

JS：

$(document).on("click", ".vote .vote_down, .vote .vote_up", function(e)
{
    if ($(e.target).is(".voted"))
        return;
    var that = $(this),
        div = that.parent(),
        type = that.is(".vote_up") ? "positive" : "negative",
        id = div.attr("data-image-id");
    $.ajax({
        type: "POST",
        url: "ad_vot.php",
        data: {
            tpye: type,
            image_id: id
        }
        timeout: 3000,
        success: function(dataBack) {
            that.addClass("voted");
            var number = div.find("."+type);
            number.html(parseInt(number.html())+(type == "positive" ? 1 : -1));
            $('#message').html('<div id="alertFadeOut" style="color: green">Your vote is added!</div>');
            $('#alertFadeOut').fadeOut(3000, function () {
                $('#alertFadeOut').text('');
            });
        },
        error: function() {
            $('#message').text('Vote failed. Please try again.');
        }
    });
});

PHP流程：

$check = $db->prepare("SELECT 1 FROM user_votes WHERE image_id = ? AND user_id = ?");
$check->bindValue(1, $_POST["image_id"], PDO::PARAM_INT);
$check->bindValue(2, $_SESSION["user_id"], PDO::PARAM_INT);

//or
$check = $db->prepare("SELECT 1 FROM user_votes WHERE image_id = ? AND user_ip = INET6_ATON(?)");
$check->bindValue(1, $_POST["image_id"], PDO::PARAM_INT);
$check->bindValue(2, $_SERVER["REMOTE_ADDR"], PDO::PARAM_STR);

$check->execute();
if ($check->rowCount())
    die("Already voted.");

$vote = $_POST["type"] == "positive" ? 1 : 0;
$insert = $db->prepare("INSERT INTO user_votes VALUE(?, ?, ?)");
$insert->bindValue(1, $_SESSION["user_id"], PDO::PARAM_INT);

//or
$insert = $db->prepare("INSERT INTO user_votes VALUE(?, ?, INET6_ATON(?))");
$insert->bindValue(1, $_SERVER["REMOTE_ADDR"], PDO::PARAM_STR);

$insert->bindValue(2, $_POST["image_id"], PDO::PARAM_INT);
$insert->bindValue(3, $vote, PDO::PARAM_INT);
$insert->execute();

$row = $vote == 1 ? "positive" : "negative";
$update = $db->prepare("UPDATE images SET ".$row." = ".$row." + 1 WHERE id = ?");
$update->bindValue(1, $POST["image_id"], PDO::PARAM_INT);
相关问题
最新问题