我一直试图在网上找到 Facebook 风格的“点赞”按钮的示例,但一直找不到类似的东西。我想做的是,在用户可以按下的图像下方放置一个按钮。一旦按下,它将增加数据库中图像记录的值,然后通过在现有数量上添加 + 1 来反映页面上的添加。我猜这需要 PHP、SQL 和 jQuery 才能实现。问题是我不知道从哪里开始。我已经创建了一个 PHP 脚本,通过提供图像 ID 来添加对特定图像的“点赞”。我已经创建了一个 jQuery 发布按钮,它可以发布到 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>';
类似的 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 多个相同的元素。您可能会发现我可能以错误的方式处理这个问题,我希望有人可以帮助我解决这个问题。
看起来您已经掌握了总体想法,只是粗略地实现了它。
您可能想为每个图像指定计数器元素,并在按下按钮后更新内部内容......
<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']));
}
请记住,这是一个非常糟糕的实现。真正的系统绝对应该不允许人们一遍又一遍地重复单击按钮来增加某些东西。当然,根据您的需要,您应该通过登录来限制它,甚至记录与他们喜欢的文件相关的用户信息,而不仅仅是在数据库中增加一个数字。
因此,您将有一个关系表来存储每个点赞的信息。这样,您可以查询数据库以确保用户在增加数字之前尚未喜欢该文件。
希望这是有道理的。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)