下面是ajax点击“关注”的demo:
html
<div class="container">
<button type="button" class="btn btn-primary attention" data-id="{{ $article->id }}">关注</button>
</div>
javascript:
<script>
$(function () {
$(".attention").on("click", function(){
var article_id= $(this).prop("data-id");
$.ajax({
method: "POST",
url: "/attention",
data: article_id
}).done(function () {
$(this).innerHTML = "已关注";
});
});
});
</script>
问题:
点了“关注”这个按钮,关注成功后,文字变为“已关注”。那么,下次打开该网页的时候,这个文字怎么保持为“已关注”呢?
就像一楼说的由后端人员给个标识(false--true)在html中来判断当前是否点赞。
打开网页的时候就应该自动进行ajax请求,而且要存储这个关注状态,
后台保存个标识,如为true,则是关注,就是控制字符
后端数据表里给一个字段,默认为不关注,当这个值改变的时候就显示已关注;前端读取数据的时候一个判断条件,如果这个值等数据那么就是已关注。
<div class="container">
<button type="button" class="btn btn-primary attention" data-id="{{ $article->id }}">关注</button>
</div>
如果上面代码是后端嵌套的, 让后端判断, {{ if 关注 }}已关注{{ else }}关注{{ /if }} //不同的模板引擎有不同的语法
另外:
$(this).innerHTML = "已关注";
这个真的能让文字变成已关注???
innerHTML可是原生的方法, 你让一个jq对象去执行原生的方法?
再说, 在ajax的done里面, 你确定this指向的是点击的按钮?