如何创建一个类似Facebook的“赞”系统？

Question

我一直在尝试在线找到Facebook风格的“赞”按钮的示例，但还没有找到类似的内容。我想要做的是，在图像下方放置一个按钮，用户可以按下该按钮。一旦按下，它将增加数据库中图像记录的值，然后通过将现有数量加1来反映添加操作。我猜测这需要使用PHP、SQL和jQuery来完成。问题是我不知道从哪里开始。我已经创建了一个PHP脚本，通过给出图像ID来添加我的“赞”。我已经创建了一个jQuery Post按钮，用于将赞发送到PHP。我卡在如何更新页面以反映点赞上。

首先，我认为到目前为止我编写的代码完全很丑陋啊。

以下是到目前为止的所有代码：PHP代码用于输出“赞”的计数和“赞”按钮，以及添加的代码。 $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>';

在like.php中，用于增加点赞数量的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+个相同的元素。您可能已经能够发现我可能正在错误地处理此问题，并希望有人能帮助我解决这个问题。

- Linkandzelda

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}是每张图片都独一无二的。将其传递给test({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']));
}

请注意，这是一个非常糟糕的实现。真正的系统应该避免人们只是重复点击按钮来增加某些东西。根据您的需求，当然可以通过登录来限制它，甚至记录与他们所喜欢的文件相关的用户信息，而不仅仅是在数据库中递增一个数字。因此，您将拥有一个关系表，用于存储每个喜欢的信息。这样，您可以查询数据库以确保用户在递增数量之前没有已经喜欢了该文件。希望这有意义。

- Kai Qing

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'];

- adidasadida