簡單的AJAX書籤

Question

我有一個頁面上使用PHP的項目列表。我想添加一個簡單的AJAX切換，以允許用戶在瀏覽時爲列表中的項目添加書籤。

因此，如果項目 - >書籤字段= 1，那麼該項目的書籤，它應該顯示一個簡單的圖像。當他們再次點擊它時，它會在mysql中將其設置爲「0」，並且書籤圖像將變回其他內容。

什麼是最好的方式來做到這一點，而無需重新加載頁面？

Answer 1

AJAX是將數據保存在服務器上的方法。但是，如果你想添加/刪除在飛行書籤，同時在頁面上，你可以使用的開啓和關閉切換書籤功能，使用數據 - *屬性

$(".bookmarkButton").click(function(){ 
if(! $(this).parent().data('bookmark')){ 
    alert('bookmarked'); 
    $(this).parent().data('bookmark', 1); 
    // Add image + AJAX call 
} 
else { 
    alert('not bookmarked'); 
    $(this).parent().data('bookmark', null); 
    // Remove image + AJAX call 
} 

}）;

這裏有一個簡單的JSFiddle：http://jsfiddle.net/YwTuB/

Answer 2

我覺得你可以用Google搜索 「jQuery的AJAX例如，」 但在這裏，你去...

HTML：

<div class="container"> 
    <div class="item" id="<?php echo $whateverYourIdIs; ?>">Bookmark me!</div> 
</div> 

的jQuery：

$(document).ready(function(){ 
    $('.item', $('.container')).click(function(){ 
     var id = $(this).attr('id'); 
     $.ajax({ 
      type: "POST", 
      url: "some.php", 
      data: { id: id } 
     }).done(function(msg) { 
      alert("Data Saved: " + msg); 
     }); 
    }); 
});