javascript - 关注、取消关注类似的这个功能怎么实现？

Question

<script type="text/javascript"> 
function change()
{       
     document.getElementById('btn').innerText="已关注";
    btn.disabled=true;
}
<button id="btn"  onclick="change()">关注</button>

像这样只能实现点击关注变成已关注 怎样让它变成已关注后再点击又变回原来关注的样子

Answer 1

function change() {
    var mark = document.getElementById('btn').innerText;
    if (mark == '关注') {
        document.getElementById('btn').innerText = "已关注";
    }
    else {
        document.getElementById('btn').innerText = "关注";
    }
}
<button id="btn" onclick="change()">关注</button>

---

php 代码没写过，不过给你个思路吧
要实现关注你的接口肯定要首先写好，简单来说这个接口需要接收一个userid，即将被关注的那个用户的ID，控制器写好之后按照你的需求就是 ajax 调用了。这里来说两种情况，都可以

GET 请求 （如果你设计的url 为 /follow/<int: userid> ）

function change() {
    var mark = document.getElementById('btn').innerText;
    if (mark == '关注') {
        $.get('follow/<int: userid>', function(data) {
            //GET 请求这个url, 接口返回 data， 判断有没有关注成功来进行DOM操作
            if (data == true) {
                document.getElementById('btn').innerText = "已关注";
            }
            else {
                //失败了，自行处理吧 ：）
                console.log('false');
            }
    })
    else {
        //取消关注，和关注差不多
    }

POST 请求 （如果你设计的url 为 /follow ）

function change() {
    var mark = document.getElementById('btn').innerText;
    if (mark == '关注') {
        $.get('follow', {'userid': <int:userid>}, function(data) {
            //POST 提交`userid`请求这个url, 接口返回 data， 判断有没有关注成功来进行DOM操作
            if (data == true) {
                document.getElementById('btn').innerText = "已关注";
            }
            else {
                //失败了，自行处理吧 ：）
                console.log('false');
            }
    })
    else {
        //取消关注，和关注差不多
    }

Ps: 简单就是这样了，$.ajax() 别忘了引用 jquery。@Wudangt 同学说的不错，兼容性问题也要注意。

---

更新
赞 @Fakefish 用get请求设计的确不合里，别的不说，csrf是免不了了，其他弊端还请大家补充，不知误导了题主没有...

Answer 2

首先，我赞同上述答案，但同时楼主也要注意不同浏览器对获取文本方法innerText的支持程度，比如，在firefox对于文本方法innerText是无效的，但同时此方法在IE中确是有效的，因此，正确的处理好不同浏览器的兼容性，是每一个程序员的必须所要具有的本质。
其次，楼主可以火狐社区了解更多有关兼容性的内容。希望我的回答对您有所帮助。

Answer 3

对楼上的答案补充几句吧。

1
juery中$.get和$.post那个回调只有成功才会调用，如果要设置失败时候的回调，请用$.ajax。

2
innerHTML符合W3C标准，而innerText只适用于IE浏览器。不过如果已经用了juery，干嘛不用$('#btn').text呢？

Answer 4

$('.follow').click(function() {
    var _$this = $(this);
    _$this.data('value',_$this.text()).text('Loading');
    _$this.hasClass('active')?
        $.post('/user/unfollow',{id: '123'},function(d){
            if(success){
                _$this.text('关注').removeClass('active');
            } else {
                _$this.text(_$this.data('value'));
            }
        }:
        $.post('/user/follow',{id:'123'},function(d){
            if(success){
                _$this.text('已关注').addClass('active');
            } else {
                _$this.text(_$this.data('value'));
            }
        });
});