简单的 AJAX 书签答案

【问题标题】：Simple AJAX bookmark简单的 AJAX 书签
【发布时间】：2013-08-05 14:31:46
【问题描述】：

我有一个使用 PHP 的页面上的项目列表。我想添加一个简单的 AJAX 切换，以允许用户在浏览时为列表中的项目添加书签。

因此，如果 item->bookmark field = 1，则该项目已添加书签并且应该显示一个简单的图像。当他们再次单击它时，它会在 mysql 中将其设为 ="0"，并且书签图像会变回其他内容。

在不重新加载页面的情况下最好的方法是什么？

【问题讨论】：

标签： php javascript ajax

【解决方案1】：

我觉得你可以用谷歌搜索“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 );
        });
    });
});

【讨论】：

【解决方案2】：

AJAX 是在服务器上保存数据的方法。但是如果你想在页面上动态添加/删除书签，你可以使用一个功能来打开和关闭书签，使用 data-* 属性

$(".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/

【讨论】：