1024快乐程序员们

我是如何用ajax实现点赞功能的?

index页面
表格里面每行一个点赞按钮(前一列td是赞数显示)

设置class在script中定位这个超链接 用属性记录选中对象的属性值:该电影的id、赞数 链接地址javascript:void(0)

script中写ajax代码
点击超链接,触发function()

function在发送ajax请求前,先从页面中获取几个值:
标签属性中获取被点赞电影的id(mid)、目前赞数(mzanCount)
$(this)获取被点击的a标签
num=加一过后的赞数

ajax代码
向home提交,并向home传值op=zan,mid=mid
home中函数的返回值类型text

从home返回text之后,
根据text值对点击超链接做处理:
返回值==“1”弹出对话框"点赞成功",
并用self.parent().prev()获取标签所在的标签的前一个
并设置赞数td的html内容为加一后的赞数num
返回值!=“1”弹出对话框"点赞失败",

$(".zan").live(“click”,function(){
var mid = $(this).attr(“mid”);
var mzanCount = $(this).attr(“mzanCount”);
var self = $(this);
var num = parseInt(mzanCount)+1;
alert(“mid:”+mid);
$.ajax({
url:“home”,
type:“post”,
data:{“op”:“zan”,“mid”:mid},
dataType:“text”,
success:function(result){
if(result==“1”){
alert(“点赞成功”);
alert(num);
self.parent().prev().html(num);//虽然home中调用后台方法给电影属性+1,但是前台无法同步显示,必须通过获取+更改页面元素的值
}else{
alert(“点赞失败”);
}
},
error:function(){

	}
});

});
});

controller
新增op=zan分支,修改数据库
getParameter(“mid”)获取被点赞电影的id
movieService.zanMovie(mid);调用zanmovie方法给该电影数据库中的赞数+1
out.print(result);向ajax返回一个结果值(修改数据库是否成功)

发布了33 篇原创文章 · 获赞 4 · 访问量 2160

猜你喜欢

转载自blog.csdn.net/weixin_44981510/article/details/102726870