我的网站上有一个提要页面(非常类似于facebook)，可以点赞和评论帖子。我使用ajax来更新帖子，然而，在类似的情况下，而不是每个单独的帖子重新加载后，整个提要都会更新(而不是整个页面本身，它只是返回到提要的顶部)。
我相信这是因为每个帖子都使用一个名为feedLikes.php的文件，这些文件都在重新加载，而不仅仅是一个特定的帖子。我不知道如何只让那一个帖子重新加载。下面是我的代码。
从下面的feed.php，你可以看到我正在搜索数据库中的所有帖子。这些帖子中的每一个都有一个feedID，如下所示：
$findShouts = $pdo->prepare('SELECT * FROM feed WHERE name IN (SELECT scoutingUsername FROM scout WHERE scoutedUsername =? OR scoutingUsername =?) ORDER BY timestamp DESC');
//execute query and variables
$findShouts->execute([$username, $username]);
if ($findShouts->rowCount() > 0)
{
//get the shouts for each scout
while($row = $findShouts->fetch(PDO::FETCH_ASSOC)){
$shoutID[] = $row['id'];
$shoutUsername[] = $row["username"];
$shoutName[] = $row["name"];
$shoutText[] = $row["text"];
$shoutTimestamp[] = $row["timestamp"];
}
$shoutCount = count($shoutUsername);
for($indexShout=0; $indexShout < $shoutCount; $indexShout++) {
print'
<div class=feedNewShout>
<div class=shoutInformation>
<div class=shoutName>
<p>'. $shoutName[$indexShout] .'</p>
</div>
<div class=shoutTimestamp>
<p>'. timeElapsed("$shoutTimestamp[$indexShout]", 2) .'</p>
</div>
<div class=shoutText>
<p>'. $shoutText[$indexShout] .'</p>
</div>
<input type="hidden" name="feedID" class="feedID" value="'. $shoutID[$indexShout] .'">
<div class=likesAndComments>
<div class=likesAjax data-id="'.$shoutID[$indexShout] .'">
</div>
<div class=commentsAjax data-id="'.$shoutID[$indexShout] .'">
</div>
<div class=deleteShoutAjax data-id="'.$shoutID[$indexShout] .'">
</div>
</div>
</div>
</div>';
}
unset($shoutID);
unset($shoutUsername);
unset($shoutName);
unset($shoutText);
unset($shoutTimestamp);
}
在此基础上，我在feedLikesAjax.js中使用jqueryAjax调用来查找所需的每个feedID：
$(document).ready(function()
{
$(".likesAjax").each(function() {
var feedID = $(this).attr("data-id");
$.ajax({
url: "feedLikes.php",
cache: false,
type: "POST",
data: {feedID: feedID},
dataType: "html",
success: function(html){
$(".likesAjax[data-id='"+ feedID +"']").empty();
$(".likesAjax[data-id='"+ feedID +"']").append(html);
}
});
});
});
我使用这些信息并将其传递给feedLikes.php:
if (isset($_POST['feedID']))
{
$feedID = ($_POST['feedID']);
$findHasUserLiked = $pdo->prepare('SELECT username FROM feedLikes WHERE feedID =? and username=?');
//execute query and variables
$findHasUserLiked->execute([$feedID, $username]);
if ($findHasUserLiked->rowCount() > 0)
{
$hasUserLiked = $findHasUserLiked->fetchColumn();
echo<<<_END
<form action="feedLikes.php" id="unlikePostForm$feedID" method="post">
<button type="submit" class="unLikeButton"></button>
<input type="hidden" name="feedIDForUnlike" class="feedIDForUnlike$feedID" value="$feedID">
</form>
_END;
?>
<script type="text/javascript">
$(document).ready(function()
{
$('#unlikePostForm<?php echo $feedID ?>').on('submit', function (e) {
e.preventDefault();
var feedIDUnlike = $(".feedIDForUnlike<?php echo $feedID ?>").val();
$.ajax({
url: "feedLikesClicked.php",
cache: false,
type: "POST",
data: {feedIDUnlike: feedIDUnlike},
dataType: "html",
success: function(html){
location.reload();
}
});
});
});
</script>
<?php
}
else
{
echo<<<_END
<form action="feedLikes.php" id="likePostForm$feedID" method="post">
<button type="submit" class="likeButton"></button>
<input type="hidden" name="feedIDForLike" class="feedIDForLike$feedID" value="$feedID">
</form>
_END;
?>
<script type="text/javascript">
$(document).ready(function()
{
$('#likePostForm<?php echo $feedID ?>').on('submit', function (e) {
e.preventDefault();
var feedIDLike = $(".feedIDForLike<?php echo $feedID ?>").val();
$.ajax({
url: "feedLikesClicked.php",
cache: false,
type: "POST",
data: {feedIDLike: feedIDLike},
dataType: "html",
success: function(html){
location.reload();
}
});
});
});
</script>
<?php
}
$likesNumber = $pdo->prepare('SELECT count(*) FROM feedLikes WHERE feedID =?');
//execute query and variables
$likesNumber->execute([$feedID]);
$numberOfLikes = $likesNumber->fetchColumn();
print'
<div class=numberOfLikes data-id="'.$feedID .'">
<p>'. $numberOfLikes .'</p>
</div>';
}
?>
就像我说的，除了重新加载之外，一切都很完美。现在我知道了成功时使用的location.reload实际上是为每个帖子重新加载每个feedLikes.php。但我真的很纠结于如何重新加载该特定帖子所需的当前feedLikes.php帖子。我以为这真的很简单，也许吧，但我在任何地方都找不到。
真的很感谢你的帮助。谢谢
有很多方法可以做到这一点。为了实现您的实际要求，您需要修改jQuery成功函数，使其仅针对您感兴趣的帖子的div元素。可以向HTML添加一个唯一的ID，也可以使用基于class和data-ID属性的选择器来识别特定的帖子。
然后，youtPHP只需要返回您想要修改的HTML，并且您的jQuery成功函数将其插入到相关帖子的div中。
话虽如此，对于你想要做的事情，真的有必要重新加载帖子吗？您可以让您的PHP脚本只返回新的点赞次数以及当前用户是否喜欢该帖子，然后在成功调用中更新这些值。
您可以对代码进行大量优化，一旦页面加载，feedLikesAjax.js脚本就会调用feedLikes.php，为每个帖子创建一个新的ajax请求。您可以将feedLikes.php中的代码组合到feed.php中，让服务器立即输出包含所有数据的页面，并完全消除feedLikesAjax.js。你可以为每个帖子用一个按钮来替换点赞和不点赞的表单，现在你正在为每个表单单独设置一个事件处理程序，如果你给它们都一个公共类，你只需要使用一个事件处理器。
编辑
回答您的意见：
在while语句中不需要其他查询。您可以使用左联接扩展第一个查询，使其在返回的结果中还包括feedLikes表中的数据，也可以使用原始查询的另一个子查询向返回的结果添加另一列。类似的内容应该会给你一个userLiked行，值为1或0表示喜欢/不喜欢。你可能需要对它进行一点编辑才能让它为你工作，我无论如何都不是SQL大师。
SELECT *, (SELECT COUNT(L.username) FROM feedLikes L WHERE L.feedID = F.id AND L.username = F.username) AS userLiked
FROM feed F
WHERE name IN (SELECT scoutingUsername FROM scout WHERE scoutedUsername =? OR scoutingUsername =?)
ORDER BY timestamp DESC