这个jquery的ajax问题

Question

下面是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>

问题：
点了“关注”这个按钮，关注成功后，文字变为“已关注”。那么，下次打开该网页的时候，这个文字怎么保持为“已关注”呢？

Answer 1

后台保存个标识，如为true，则是关注，就是控制字符

Answer 2

打开网页的时候就应该自动进行ajax请求，而且要存储这个关注状态，

Answer 3

就像一楼说的由后端人员给个标识（false--true）在html中来判断当前是否点赞。

Answer 4

<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指向的是点击的按钮?

Answer 5

后端数据表里给一个字段，默认为不关注，当这个值改变的时候就显示已关注；前端读取数据的时候一个判断条件，如果这个值等数据那么就是已关注。