個々のPHPファイルのためのAjax成功関数location.reload

Question

私は私のウェブサイト（Facebookと非常によく似ています）に私が記事を好きでコメントするためのフィードページを持っています。私はポストを更新するためにajaxを使用していますが、個々のポストをリロードするのではなく、フィード全体がそうです（ページ全体ではなく、フィードの先頭に戻る）。

これは、それぞれの投稿がfeedLikes.phpという名前のファイルを使用しており、その1つの特定の投稿ではなくすべてがリロードされているからです。私はどのようにその1つのポストリロードを行うだけではわかりません。以下は私のコードです。

以下の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); 
} 

このことから、私は必要な個々のfeedIDを見つけるために、feedLikesAjax.jsでjqueryのAjax呼び出しを使用します。

$(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の投稿をリロードする方法に固執しています。私はこれが本当にシンプルだろうと思っていましたが、おそらくどこでも見つけることができません。

助けを借りて本当に感謝しています。ありがとうございます

Answer 1

これを実行する方法はたくさんあります。興味のある投稿のdiv要素のみをターゲットにするために、jQueryの成功関数を変更する必要があるかどうかを実際に求めるには、HTMLに一意のIDを追加するか、クラスとデータベースのセレクタを使用して、特定の投稿を識別するためのid属性。

あなたが修正したいHTMLを返すだけで、jQueryの成功関数に関連する投稿のdivに挿入する必要があります。

あなたがしようとしていることは本当に投稿をリロードする必要があるということですか？あなたは、あなたのPHPスクリプトが好きな数の新しいものを返すだけでなく、現在のユーザーが投稿を好きであったかどうかを確認し、成功の呼び出しでそれらの値を更新することができます。

feedLikesAjax.jsスクリプトは、ページが読み込まれるとfeedLikes.phpを呼び出すので、各投稿ごとに新しいajaxリクエストが作成されます。 feedLikes.phpのコードをfeed.phpに結合して、サーバーにすべてのデータをすぐに出力させ、feedLikesAjax.jsを完全に取り除くことができます。あなたは好き嫌いのフォームを各投稿ごとに1つのボタンに置​​き換えることができます。今では、それぞれのフォームに個別にイベントハンドラを設定しています。あなたのコメントに答えるために

EDIT

：

あなたのwhile文で別のクエリを必要としません。左結合を使用して最初のクエリを展開し、返された結果にfeedLikesテーブルのデータを含めたり、元のクエリに別のサブクエリを使用して、返された結果に別の列を追加することができます。この行に沿った何かが、好き嫌いのために1または0の値を持つuserLiked行を与えるはずです。あなたはそれをあなたのために働かせるために少し編集しなければならないかもしれませんが、私は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