简单的AJAX书签
Simple AJAX bookmark
我有一个使用PHP的页面上的项目列表。我想添加一个简单的AJAX切换,允许用户在浏览时为列表中的项目添加书签。
因此,如果item->bookmark字段=1,则该项目被添加了书签,并且它应该显示一个简单的图像。当他们再次点击它时,它会在mysql中使它="0",书签图像会变回其他内容。
在不重新加载页面的情况下,最好的方法是什么?
我觉得你本可以在谷歌上搜索"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 );
});
});
});
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/
相关文章:
- 无法在通过jQuery的ajax加载的页面中执行javascript
- 如何通过ajax刷新JSF填充的javascript变量
- 如何在php文件中获取$.post-ajax传递的值
- Replacing $ .ajax?
- 在使用Polymer'加载所有json文件后执行方法;s的核心ajax
- Ajax发布表单序列化,发布引号'
- 通过Ajax将JavaScript函数传递给PHP文件
- ajax请求的顺序总是不同的
- 可以't使用Polymer's的核心ajax
- Ajax Live搜索发布到Laravel视图
- Ajax聊天消息重复而不仅仅是更新
- 从控制器返回后Ajax启动事件激发
- PHP AJAX图片上传示例不上传
- 从ajax请求中获取javascript对象
- 另一个ajax调用中的Jquery ajax调用在for循环中没有按预期工作
- 如何在Javascript中解析AJAX数组的特定部分
- Ajax文件加载和<输入>文件加载
- Javascript/jQuery中的并行Ajax调用
- 简单的AJAX书签
- jQuery Ajax和AddThis社交书签应用程序