我在使用 PHP 的页面上有一个项目列表。我想添加一个简单的 AJAX 切换,以允许用户在浏览时为列表中的项目添加书签。
因此,如果 item->bookmark field = 1,则该项目已添加书签并且应该显示一个简单的图像。当他们再次单击它时,它在 mysql 中将其设为 =“0”,并且书签图像变回其他内容。
在不重新加载页面的情况下执行此操作的最佳方法是什么?
我在使用 PHP 的页面上有一个项目列表。我想添加一个简单的 AJAX 切换,以允许用户在浏览时为列表中的项目添加书签。
因此,如果 item->bookmark field = 1,则该项目已添加书签并且应该显示一个简单的图像。当他们再次单击它时,它在 mysql 中将其设为 =“0”,并且书签图像变回其他内容。
在不重新加载页面的情况下执行此操作的最佳方法是什么?
我觉得你可以用谷歌搜索“jquery ajax example”但是你去......
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 );
});
});
});
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/