阿神
                        
闭关修行中......
                    
                
                

                    

                    

                        

                            回答
                        
                    
                
            
            

                

                    
全部回复(4)
                    我来回复
                
                


                                

                    
                    

                        

                            

                                伊谢尔伦2017-04-10 14:34:40
                                4楼
                            
                            
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是免不了了，其他弊端还请大家补充，不知误导了题主没有...
                            

                                 
                                赞 +0
                                

                                    添加回复
                                
                            
                                                            

                                    

                                        

                                            

                                                
                                                阿神
                                            
                                            

                                        
                                        
                                        回复
                                    
                                
                            
                            

                                

                                    
                                

                            


                        
                    

                
                

                                

                    
                    

                        

                            

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

                                 
                                赞 +0
                                

                                    添加回复
                                
                            
                                                            

                                    

                                        

                                            

                                                
                                                阿神
                                            
                                            

                                        
                                        
                                        回复
                                    
                                
                            
                            

                                

                                    
                                

                            


                        
                    

                
                

                                

                    
                    

                        

                            

                                黄舟2017-04-10 14:34:40
                                2楼
                            
                            
对楼上的答案补充几句吧。

1

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

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

                                 
                                赞 +0
                                

                                    添加回复
                                
                            
                                                            

                                    

                                        

                                            

                                                
                                                阿神
                                            
                                            

                                        
                                        
                                        回复
                                    
                                
                            
                            

                                

                                    
                                

                            


                        
                    

                
                

                                

                    
                    

                        

                            

                                天蓬老师2017-04-10 14:34:40
                                1楼
                            
                            
$('.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'));
            }
        });
});

                            

                                 
                                赞 +0
                                

                                    添加回复
                                
                            
                                                            

                                    

                                        

                                            

                                                
                                                阿神
                                            
                                            

                                        
                                        
                                        回复