通過Ajax更新「像這樣」鏈接的邏輯和方法

Question

我回來看我的問題，被告知它已被「作者自願刪除」，但我沒有刪除它！所以我不知道那裏發生了什麼。所以現在我必須再次提出這個問題，並希望這次能夠留在這裏！

我有一個PHP腳本頁面，顯示一些圖像。我正在設置一種方法，登錄的用戶可以點擊圖片下方的鏈接來「喜歡」圖片（使其成爲「最喜歡的」） - 或者「不像」它，如果它已經是最喜歡的。當前用戶的「喜歡的狀態」保存在MySQL數據庫中（如1或0）。

我的PHP頁面通過圖像記錄（以及一些分頁邏輯）循環，輪詢數據庫並根據返回的「類似狀態」在每個圖像下輸出不同的鏈接。爲已經「喜歡」的圖像繪製鏈接的一種形式，並且爲不是「喜歡」的圖像創建另一種形式（每種使用兩種不同css類中的一種以視覺反饋的翻轉類型圖標出現）。

它看起來像這樣：

<?php 
$step = 0; 
while($row = $statement3->fetch()) { 
$step++; 
$ThisPhotoID = $row['photoid']; 

echo '<img src="images/'.$ThisPhotoID.'.jpg" alt="" />'; 

echo '<div class="info">'; 
$statement4 = $db->prepare("SELECT COUNT(*) FROM `likes` WHERE `username` = ? AND `photoid` = ?"); 
$statement4->execute(array($username, $ThisPhotoID)); 
    if (!$statement4->fetchColumn() > 0) { 
    //Favourite doesn't exist for this user, so invite to "like"... 
    echo '<a href="#" id="linkid'.$step.'" title="Click to like this photo" class="like">&nbsp;</a>'; 
    } 
    else { 
    //Favourite does exist for this user, so check if already "liked" or not... 
    $LikeState = 1; 
    $statement5 = $db->prepare("SELECT COUNT(*) FROM `likes` WHERE `username` = ? AND `photoid` = ? AND `likestate` = ?"); 
    $statement5->execute(array($username, $ThisPhotoID, $LikeState)); 
     if ($statement5->fetchColumn() > 0) { 
     //Favourite exists and it is liked, so invite to "unlike"... 
     echo '<a href="#" id="linkid'.$step.'" title="Click to UNLIKE this photo" class="unlike">&nbsp;</a>'; 
     } 
     else { 
     //Favourite exists but it is not "liked", so invite to "like"... 
     echo '<a href="#" id="linkid'.$step.'" title="Click to like this photo" class="like">&nbsp;</a>'; 
     } 
    } 
echo '</div>'; 
} 
?> 

這一切工作正常，並繪製相應的鏈接爲每個圖像，根據是否它的「喜歡」或沒有。目前鏈接引用只是散列，因爲我想知道如何執行處理來改變「喜歡的狀態」。

我有一個處理腳本準備就緒，其名稱可以代替哈希，它可以在查詢字符串中使用$ ThisPhotoID變量，並更新數據庫（切換「類似狀態」），然後返回該頁面通過PHP頭部 - 也許是一個錨點。

的處理腳本會是這個樣子：

<?php 
include("login.php"); 
$username = $session->username; 

include('db_connect.php'); 

//This would be used in the link's query string... 
$PhotoID = $_GET['photoid']; 

//Get existing "likestate"... 
$askstatement = $db->prepare("SELECT `likestate` FROM `likes` WHERE `username` = ? AND `photoid` = ?"); 
$askstatement->execute(array($username, $PhotoID)); 
$CurrentLikeState = $askstatement->fetchColumn(0); // Will be 1 or 0. 

//Make new likestate... 
if ($CurrentLikeState == 1) { 
$NewLikeState = 0; 
} 
else { 
$NewLikeState = 1; 
} 

//Change the like state... 
$update_statement = $db->prepare("UPDATE `likes` SET `likestate` = ? WHERE `username` = ? AND `photoid` = ?"); 
$update_statement->execute(array($NewLikeState, $username, $PhotoID)); 

header("Location:mypage.php"); 
?> 

但這並不理想，我想知道是否有可能做到通過Ajax更新，不留或刷新頁面，也許使用JQuery。至於我可以告訴大家，要做到這一點，我需要包括jQuery和：

• 插入一個js函數
• 在每一個環節中插入一個js onclick事件
• 建設的新形式javacsript/ajax的處理文件中的鏈接用作替換鏈接

這是我需要幫助的javascript/ajax代碼，但我也有點困惑，因爲它可能會如何工作無論如何 - 不會JavaScript/ajax首先繪製我的鏈接，如果它會改變它們後數據庫被更新？ （如果PHP輸出的鏈接，他們不會像PHP輸出它們一樣留下來嗎？）

Answer 1

僅僅因爲我真的不知道如何評論你的問題，所以我在本節中提供了這個評論。 JQuery有兩個不同的功能，你可以使用它們，分別是$.post()和$.ajax() -functions。

你能類的鏈接是這樣的：

<a class="like_link" title="<?php echo $picture_id; ?>"> 

，只是使用jQuery的點擊功能：

$('.like_link').click(function(){ 
    var id=$(this).attr("title"); 
    // Ajax-stuff 
}); 

什麼的那種方式。我不打算這是一個答案，只是信息。

Answer 2

我在過去做過類似的事情，並將其修改爲適合您的示例。

意味着你的HTML的鏈接看起來是這樣的：

<div id="allmylinks"> 
    <a href="toggle.php?link=foo">First link</a> 
    <a href="toggle.php?link=bar">Second link</a> 
</div> 

$("div#allmylinks a").click(function(e){ 
    e.preventDefault(); 
    var link= $(this); 
    $.get(
     $(this).attr('href'), 
     function(data){ 
      console.log('Succesfull! '+data); 
      link.attr('href',data);  // Set the new link 
      $link.append(' was toggled');// Add some text 
    }); 
    $(this).parents('div.entry-content').fadeOut('slow'); 
}); 

在toggle.php我有這樣的：

if(isset($_REQUEST['link'])) 
    $link = $_REQUEST['link']; 
else 
    $link = "error"; 

// Validate link and process it 
... 

// If it's ajax 
if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && $_SERVER['HTTP_X_REQUESTED_WITH']==='XMLHttpRequest') 
{ 
    // The new link 
    echo 'toggle.php?link=toggled-'.$link; 
} 
// Not an ajax-request, redirect to previous page 
else 
{ 
    header('Location: index.php'); 
    die(); 
}