这次给大家带来ajax直接实现点赞功能步奏详解,ajax直接实现点赞功能的注意事项有哪些,下面就是实战案例,一起来看一下。
首先 是将后台中 模块--->新闻心情--->心情配置 去掉多余的剩一个,名称改成 “赞” 提交保存。
其次 是修改新闻心情的模板文件:/phpcms/templates/default/mood/index.html
删除所有代码只返回点赞总数量
{loop $setting $k $v}
{$data[$v['fields']]}
{/loop}
模板页面的实现如下 通过循环数组
<p class="info">
<a href="http://phpcms.com/content-150-1-1.html" target="_blank" title="展会现场人头攒动"><h4 class="title ellipsis download">展会现场人头攒动</h4></a>
<p class="date">2017-02-01</p>
<p class="sum">
<span class="laud"><i class="iconfont zanbtn" >赞</i><a href="javascript:;" rel="external nofollow" <span style="min-width: 0px; min-height: 0px; box-sizing: border-box; color: rgb(34, 34, 34); unicode-bidi: -webkit-isolate; font-family: consolas, "lucida console", monospace; white-space: pre-wrap;">id</span><span style="color: rgb(34, 34, 34); font-family: consolas, "lucida console", monospace; white-space: pre-wrap;">=</span><span style="min-width: 0px; min-height: 0px; box-sizing: border-box; color: rgb(34, 34, 34); unicode-bidi: -webkit-isolate; font-family: consolas, "lucida console", monospace; white-space: pre-wrap;">zans{$r[id]}</span><span style="color: rgb(34, 34, 34); font-family: consolas, "lucida console", monospace; white-space: pre-wrap;"> </span> title=<span style="color: rgb(34, 34, 34); font-family: consolas, "lucida console", monospace; white-space: pre-wrap;">$r[id]}</span>>0</a></span>
</p>
</p>
ajax 处理 k=8是点赞
$(.zanbtn).on(click,function(){
var id = $(this).next().attr(title);
var aval = $(this).next(a).html();
$.getjson('http://phpcms.com/index.php?m=mood&c=index&a=post&id=150-'+id+'-1&k=8&'+math.random()+'&callback=?', function(data){
if(data.status==1) {
console.log( $(this).next());
$(#zans+id).html(data.data);
}else {
alert(data.data);
return false;
}
})
});
相信看了本文案例你已经掌握了方法,更多精彩请关注其它相关文章!
推荐阅读:
ajax删除数据与查看数据操作的步奏详解
怎样用ajax实现弹窗登录
以上就是ajax直接实现点赞功能步奏详解的详细内容。