开发者社区 问答 正文

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

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

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

展开
收起
杨冬芳 2016-06-15 14:58:19 3193 分享 版权
1 条回答
写回答
取消 提交回答
  • IT从业
    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/ )

    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 {
            //取消关注,和关注差不多
        }
    

    $.ajax() 别忘了引用 jquery。兼容性问题也要注意。

    2019-07-17 19:39:17
    赞同 展开评论
问答地址: