Question

我有一个Feed页面，根据用户关注的对象（在我的代码中'侦察'）从数据库加载帖子（在我的代码中称为“shouts”）。基本信息正确显示。但是，在每个帖子中我想使用ajax加载一个单独的文件，它将控制帖子的喜欢。下面是我的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

不更改您的密码＆＃39;逻辑，在php中你可以为每个＆＃34; .likesAjax＆＃34;添加一个属性。名为data-id的框：

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

现在在你的ajax成功函数的jquery中你可以更新你的选择器以查找这个属性，以便更新正确的＆＃34; .likesAjax＆＃34;元素：

$(".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循环，你可以遍历结果并立即更新所有$（＆＃34; .likesAjax＆＃34;）元素。这样，您只需要对数据库进行一次查询，并且只有一次ajax调用来获取数据。

在forEach循环中加载ajax调用

1 个答案: