通过前面的学习,用ajax发送请求实现的点赞功能已经完成了
经过修改优化,配合layer框架,完成了点赞的功能。
效果
点过赞之后
第一次点赞会有来自提莫的肯定。
完整代码
window.onload = function () {
var btn =document.getElementById("support_btn");
var test = window.location.href.split('/')[4];
url1 = 'support' + test.toString();
btn.onclick = function () {
if (!localStorage.getItem(test)){
httpxml= $.ajax({
url: url1,
data: {
},
success: function (result) {
localStorage.setItem(test,true);
$("#likes_num").innerText=httpxml.responseText;
layer.open({
type: 1,
title: false,
closeBtn: 0,
shadeClose: true,
skin: 'user_layer',
content: '',
time:1200,
});
}
});
} else {
layer.msg('你已经点过赞了',{time: 1000});
}
}
}
思路
如何记录下点赞的信息是点赞功能的一个难点。而 localStorage很好的解决了这个问题。
我的方法:
当第一次点赞时,记录下文章id,即:id:true 这个键值对
localStorage.setItem(test,true);
这里的test是我的文章id。
当然最重要的是判断,这个判断写在ajax请求之前。
if (!localStorage.getItem(test)){
localStorage
localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。
localStorage 用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去删除。
localStorage 属性是只读的。
使用
保存数据语法:
localStorage.setItem("key", "value");
读取数据语法:
var lastname = localStorage.getItem("key");
最后吹一波layui
简单好用又好看。