我的网站上有一个供稿页面（非常类似于facebook），这使我能够喜欢和评论帖子。我正在使用ajax来更新帖子，但是，在一个类似的，而不是每个单独的帖子重新加载后，整个提要（不是整个页面本身，它只是返回到提要的顶部）。
我认为这是因为每个帖子都使用了一个名为div.btn__content {
padding: 0;
}
div.card__actions .btn {
min-width: 0;
}
的文件，这些文件都被重新加载，而不仅仅是那个特定的帖子。我不确定如何只重新加载一个帖子。下面是我的代码。
从下面的feedLikes.php，您可以看到我正在搜索数据库中的所有帖子。这些帖子中的每一个都有一个feedID，如下所示：
feed.php从此我在$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);
}
中使用jquery Ajax调用来查找所需的每个feedID：
feedLikesAjax.js我使用此信息并将其传递给$(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就像我说的那样，除了重装之外，它的完美运作。现在我知道成功时使用的location.reload实际上是为每个帖子重新加载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>';
}
?>
。但我真的不知道如何重新加载该特定帖子所需的当前feedLikes.php帖子。我认为这很简单，也许，但我无法在任何地方找到它。
非常感谢任何帮助。谢谢
答案 0 :(得分：0)
有很多方法可以做到这一点。要实现您实际要求的内容，您需要修改您的jQuery成功函数，以仅针对您感兴趣的帖子的div元素。通过向HTML添加唯一ID，或使用基于类和数据的选择器 - id属性用于标识特定帖子。
然后PHP需要只返回你想要修改的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