JS Ajax函数内动态操作元素值

背景

今天，要实现一个功能，通过ajax获取到后台数据，展示点赞数

效果

JS

从后台获取点赞数，渲染到前端

    var index = 0;
    $("#like").click(function () {
        var bid = $("#bid").val();
        if (index == 0) {
            index = 1;
        } else if (index == 1) {
            index = 0;
        }
        var final ="点赞";
        $.ajax({
            url:"/blog/like",
            type:"get",
            data:{id:bid,index:index},
            dataType:"json",
            success: function (json) {
                final += json.liked;
                console.log(final);
                $("#like").attr("value",final);
            }
        });
        // $(this).attr('value',);
        // $(this).val(final);
    });

HTML

<li>
 <input type="button" id="like" style="
 border: none;
 height: 30px;
 width: 100px;
 margin-top: -5px;
 float: left;
 margin-right: 10px;
 font-weight: bolder" value="点赞"/>
</li>