简单的AJAX书签

时间:2013-08-05 14:31:46

标签: php javascript ajax

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

因此,如果item->书签字段= 1,则该项目被加入书签,并且应显示简单图像。当他们再次点击它时,它在mysql中使它变为“0”并且书签图像变回其他东西。

如果不重新加载页面,最好的方法是什么?

2 个答案:

答案 0 :(得分:1)

我觉得你可以用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 );
        });
    });
});

答案 1 :(得分:0)

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

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