php - 在 forEach 循环中加载 ajax 调用

Question

我有一个提要页面，它根据用户关注的用户(在我的代码中为“侦察”)从数据库加载帖子(在我的代码中称为“喊叫”)。基本信息显示正确。然而，在每篇文章中，我想使用 ajax 加载一个单独的文件，该文件将控制帖子的喜好。下面是我的 Feed 页面的 PHP:

$findShouts = $pdo->prepare('SELECT * FROM feed WHERE name IN (SELECT scouting FROM scout WHERE scouted =? OR scouting =?)  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=likesAjax>
</div>    


</div>
</div>';

}
unset($shoutID);
unset($shoutUsername);
unset($shoutName);
unset($shoutText);
unset($shoutTimestamp);
} 

在每篇文章中，div class=likesAjax 都会执行 ajax 调用，将隐藏的 $feedID 发送到 feedlikes.php。

feedLikes.js

$(document).ready(function()
{

var feedID = $(".feedID").val();

 $.ajax({
  url: "feedLikes.php",
  cache: false,
    type: "POST",
     data: {feedID: feedID},
     dataType: "html",
  success: function(html){
    $(".likesAjax").empty();  
    $(".likesAjax").append(html);
  }
});

    });

feedLikes.php

if (isset($_POST['feedID']))

    {

 $feedID = ($_POST['feedID']);  

echo "$feedID";
}

我遇到的问题是，我可以看到 ajax 遍历每个帖子并回显 feedID，但是，每次进行新调用时，所有 feedID 都会更改为相同的内容。我知道这是因为我在 ajax 中的成功调用将每个 likesAjax 类更新为相同的内容。因此，无论最后一篇文章的 feedID 是什么，都会为所有帖子显示。

我的问题是，如何加载 feedLikes.php 以便每个帖子都显示自己的 $feedID？

请注意，feedLikes.php 最终会使用 ID 执行某些操作，回显仅用于测试目的。

Answer 1

无需更改代码逻辑，在 PHP 中，您可以向每个“.likesAjax”框添加一个名为 data-id 的属性:

<div class="likesAjax" data-id="'.$shoutID[$indexShout] .'">

现在，在 jQuery 中的 ajax 成功函数中，您可以更新选择器以查找此属性，以便更新正确的“.likesAjax”元素:

$(".likesAjax[data-id='"+ feedID +"']").append(html);

要将这些放在一起，您需要循环遍历 .likesAjax 元素。为了使代码更简洁，您应该创建一个以 feedID 作为参数的函数，该函数将在循环的每个步骤中执行。这将如下所示:

$(".likesAjax").each(function() {
    var feedID = $(this).attr("data-id");
    loadFeedLikes(feedID);
});

function loadFeedLikes(feedID) {
    $.ajax({
      url: "feedLikes.php",
      cache: false,
      type: "POST",
      data: {feedID: feedID},
      dataType: "html",
      success: function(html){
         $(".likesAjax[data-id='"+ feedID +"']").html(html);
      }
    });
}

如果你想让这个更轻，你可以创建一个新的 feedLikes.php 来获取你拥有的所有 feedLikes 并将它们推送到一个数组中。该数组应包含您需要的内容和 feedId。然后，您只需要一次 ajax 调用，并使用 for 循环，您可以循环遍历结果并立即更新所有 $(".likesAjax") 元素。这样，您将只有一次对数据库的查询，并且只有一次 ajax 调用来获取数据。