Question

我一直试图在网上找到一个Facebook风格的“喜欢”按钮，但却找不到这样的东西。我想要做的是，在用户可以按下的图像下方放置一个按钮。按下后，它将在数据库中为图像的记录增加一个值，然后通过向现有量添加+ 1来反映页面上的添加。我猜这需要PHP，SQL和jQuery来实现。问题是我不知道从哪里开始。我已经创建了一个PHP脚本，通过提供图像ID来添加到我喜欢的特定图像。我已经创建了一个jQuery帖子按钮，它发布到PHP并喜欢图像。我坚持的是更新页面以反映类似内容。

对于初学者来说，我认为到目前为止我为此做的代码完全令人作呕lol。

到目前为止，这是我的所有代码。 PHP输出Likes count和Like按钮，再添加代码。 $ info是整个图像文件表结果的数组：

Echo "<b>Likes:</b> ".$info['likes'] . "</span>";
Echo '<script src="http://code.jquery.com/jquery-latest.js"></script><script     type="text/javascript">function test() {$.post("http://stormstorm.com/like.php?   id='.$info['fileid'].'")</script>';
Echo '<br /><img onClick="test();" src="img/like.jpg"></p>';

类似的PHP在like.php中增加：

$id = $_GET['id'];
mysql_query("UPDATE files SET likes=likes+1 WHERE fileid=".$id) or die(mysql_error());

对于喜欢的PHP工作正常，我很高兴。但是，我认为表现出喜欢的东西很糟糕。事情是我有一个list.php，它将一个接一个地打印数据库的内容，以打印列出的所有图像。因此它会一遍又一遍地打印相同的脚本副本，通常将当前图像ID硬编码到发布中。我对此很新，但觉得这个代码很糟糕，而且它不会更新图像部分。

我正在考虑使用Javascript来简单地获取Likes元素和++它，然后它就击中了我。我的列表将包含超过100个这些相同的元素。你可能会说我可能会以错误的方式接近这个，我希望有人可以帮我解决这个问题。

Answer 1

看起来你有一般的想法，只是粗略的实现。

您可能希望为每个图像指定计数器元素，并在按下按钮后更新内部内容...

<img src="xxx.jpg">
<p>
    <a href="javascript:test({image_id});">Like</a> <span id="{image_id}_count">150</span>
</p>

{image_id}显然对每个图像都是唯一的。传递给测试（{image_id}），然后在成功时更新计数总数的html ......

function test(id)
{
    $.ajax({
        url: 'http://stormstorm.com/like.php',
        method: 'get',
        data: {id: id},
        dataType: json,
        success: function(data)
        {
             $('#' + id + '_count').html(data.total);
        }
    });
}

在你的php中，你会完全按照你所做的去做，除了将json编码的数组返回给js进行更新...

$id = mysql_real_escape_string($_GET['id']);
mysql_query("UPDATE files SET likes=likes+1 WHERE fileid=".$id);
if(mysql_affected_rows() > 0)
{
    $sql = mysql_fetch_assoc(mysql_query("SELECT `likes` FROM `files` WHERE `fileid` = ".$id));

    echo json_encode(array('total' => $sql[0]['likes']));
}

请记住，这是一个非常糟糕的实现。真正的系统绝对应该是一个不允许人们一遍又一遍地反复点击按钮以增加它的地狱的东西。当然，根据您的需要，您应该通过登录来限制它，甚至记录相对于他们喜欢的文件的用户信息，而不仅仅是增加数据库中的数字。所以你会有一个关系表来存储每个类似的信息。这样，您可以在递增数字之前查询数据库以确保用户尚未喜欢该文件。

希望这是有道理的。

Answer 2

我认为你正朝着正确的方向前进。您可以在php中更新调用之后返回喜欢的数量，并让jquery更新类似的计数。我在下面添加了一些代码作为示例。

HTML：

<form name="like_form">
  <input type="hidden" name="id" value="<?php echo $info['fileid']; ?>" />
  Likes: <span class="like_count"><?php echo $info['likes']; ?></span>
  <img src="img/like.jpg" class="like_click" />
</form>

使用Javascript：

$(document).ready(function() {
  $('img.like_click').click(function() {
    var form = $(this).closest('form[name=like_form]');
    var id = $(form).find('input[name=id]').val();
    $.post("http://stormstorm.com/like.php?id='" + id + "', function(data) {
      $(form).find('span.like_count').html(data);
    });
});

PHP：（*注意：我没有检查语法，但希望它足以理解这个想法。）

$id = $_GET['id'];
mysql_query("UPDATE files SET likes=likes+1 WHERE fileid=".$id) or die(mysql_error());
$result = mysql_query("SELECT likes from files where fileid=" . $id) or die(mysql_error());
$row = mysql_fetch_assoc($result);
echo $row['likes'];

如何创建Facebook风格的“喜欢”系统？

2 个答案: