通过Ajax更新“喜欢此”链接的逻辑和方法

时间:2012-05-22 18:50:12

标签: php mysql ajax

我回来查看我的问题,并被告知它“被其作者自愿删除”,但我没有删除它!所以我不知道那里发生了什么。所以现在我必须再次问它,并希望这次它留在这里!

我有一个PHP脚本页面,显示了许多图像。我正在设置一种方法,登录用户可以单击图像下方的链接以“喜欢”图像(使其成为“最喜欢的”) - 或者如果它已经是最喜欢的话,则“不像”它。用户的当前“喜欢状态”保存在MySQL数据库中(为1或0)。

我的PHP页面遍历图像记录(以及一些分页逻辑),轮询数据库并根据返回的“相似状态”在每个图像下方输出不同的链接。一种形式的链接是针对已经“喜欢”的图像绘制的,另一种形式是针对不喜欢的图像(每种形式使用两种不同的css类中的一种作为视觉反馈的翻转类型图标)。

看起来像这样:

<?php
$step = 0;
while($row = $statement3->fetch()) {
$step++;
$ThisPhotoID = $row['photoid'];

echo '<img src="images/'.$ThisPhotoID.'.jpg" alt="" />';

echo '<div class="info">';
$statement4 = $db->prepare("SELECT COUNT(*) FROM `likes` WHERE `username` = ? AND `photoid` = ?");
$statement4->execute(array($username, $ThisPhotoID));
    if (!$statement4->fetchColumn() > 0) {
    //Favourite doesn't exist for this user, so invite to "like"...
    echo '<a href="#" id="linkid'.$step.'" title="Click to like this photo" class="like">&nbsp;</a>';
    }
    else {
    //Favourite does exist for this user, so check if already "liked" or not...
    $LikeState = 1;
    $statement5 = $db->prepare("SELECT COUNT(*) FROM `likes` WHERE `username` = ? AND `photoid` = ? AND `likestate` = ?");
    $statement5->execute(array($username, $ThisPhotoID, $LikeState));
        if ($statement5->fetchColumn() > 0) {
        //Favourite exists and it is liked, so invite to "unlike"...
        echo '<a href="#" id="linkid'.$step.'" title="Click to UNLIKE this photo" class="unlike">&nbsp;</a>';
        }
        else {
        //Favourite exists but it is not "liked", so invite to "like"...
        echo '<a href="#" id="linkid'.$step.'" title="Click to like this photo" class="like">&nbsp;</a>';
        }
    }
echo '</div>';
}
?>

这一切都运行正常,并根据是否“喜欢”为每个图像绘制适当的链接。目前链接引用只是哈希,因为我想知道如何进行处理来改变“类似状态”。

我准备好了一个处理脚本,我的名字可以代替哈希,它可以在查询字符串中获取$ ThisPhotoID变量,并更新数据库(切换“like state”)然后返回到页面通过PHP标题 - 也许是一个锚。

处理脚本看起来像这样:

<?php
include("login.php");
$username = $session->username;

include('db_connect.php');

//This would be used in the link's query string...
$PhotoID = $_GET['photoid'];

//Get existing "likestate"...
$askstatement = $db->prepare("SELECT `likestate` FROM `likes` WHERE `username` = ? AND `photoid` = ?");
$askstatement->execute(array($username, $PhotoID));
$CurrentLikeState = $askstatement->fetchColumn(0); // Will be 1 or 0.

//Make new likestate...
if ($CurrentLikeState == 1) {
$NewLikeState = 0;
}
else {
$NewLikeState = 1;
}

//Change the like state...
$update_statement = $db->prepare("UPDATE `likes` SET `likestate` = ? WHERE `username` = ? AND `photoid` = ?");
$update_statement->execute(array($NewLikeState, $username, $PhotoID));

header("Location:mypage.php");
?>

但这并不理想,我想知道是否可以通过Ajax进行更新,而无需离开或刷新页面,也许使用JQuery。据我所知,要做到这一点,我需要包含JQuery,并且:

  • 插入js功能
  • 在每个链接中插入js onclick事件
  • 在处理文件中为javacsript / ajax构建新形式的链接,以用作替换链接

这是我需要帮助的javascript / ajax代码,但是我对它如何可能工作有点困惑 - 不会javascript / ajax必须首先绘制我的链接,如果在数据库更新后它会改变它们吗? (如果PHP输出链接,它们不会像PHP输出那样停留吗?)

2 个答案:

答案 0 :(得分:0)

只是因为我真的不知道如何评论您的问题,我在本节提供此评论。 JQuery有两个不同的函数,可以使用$.post()$.ajax()函数。

你可以像这样对你的链接进行分类:

<a class="like_link" title="<?php echo $picture_id; ?>">

只需使用jquery点击功能:

$('.like_link').click(function(){
     var id=$(this).attr("title");
     // Ajax-stuff
});

或那种方式的东西。我真的不打算这是一个答案,只是提供信息。

答案 1 :(得分:0)

我过去做过类似的事情并将其修改为一个例子。

假设您的html链接如下所示:

<div id="allmylinks">
    <a href="toggle.php?link=foo">First link</a>
    <a href="toggle.php?link=bar">Second link</a>
</div>
$("div#allmylinks a").click(function(e){
    e.preventDefault();
    var link= $(this);
    $.get(
        $(this).attr('href'),
        function(data){
            console.log('Succesfull! '+data);
            link.attr('href',data);      // Set the new link
            $link.append(' was toggled');// Add some text
    });
    $(this).parents('div.entry-content').fadeOut('slow');
});

在toggle.php我有这个:

if(isset($_REQUEST['link']))
    $link = $_REQUEST['link'];
else
    $link = "error";

// Validate link and process it
...

// If it's ajax
if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && $_SERVER['HTTP_X_REQUESTED_WITH']==='XMLHttpRequest')
{
    // The new link
    echo 'toggle.php?link=toggled-'.$link;
}
// Not an ajax-request, redirect to previous page
else 
{
    header('Location: index.php');
    die();
}