zepto实现点赞、发送请求修改数据

点赞后，点赞按钮改变样式，获取需要的参数信息，然后通过zepto发送Ajax请求，得到返回的信息，判断请求结果，然后根据结果渲染数据。
HTML代码：

<div class="bottom">
   <div class="btn">
        <span class="btnzan" id="btnzan"></span>
            <!--点赞后加上active类-->
       <div class="text-center total-nums">0</div>
   </div>
</div>

CSS代码：

.bottom .btn {
    text-align: center;
    margin-top: -1.25rem;
}

.bottom .btn .btnzan {
    display: inline-block;
    width: 2.16666667rem;
    height: 2.16666667rem;
    background: url(../images/no-zanbtn.png) no-repeat;
    background-size: contain;
}

.bottom .btn .btnzan.active {
    background: url(../images/zanbtn.png) no-repeat;
    background-size: contain;
}

JS代码：

<script type="text/javascript" src="js/zepto.js"></script>
$(function() {
    $("#btnzan").bind("click", function() {
        var tid = $('#t_id').val();
        var sid = $('#s_id').val();
        // 上面两个可以通过用户在input标签中输入或者后台渲染数据时得到。
     // 在本例中并没有这两个参数的HTML代码，
     // 我们可以在实际项目中根据需要来清加或修改，
     // Ajax请求的方式是通用的，参数可以增减。        
        var zan = $('#zan').text();
      
        $(this).addClass('active');
        $.ajax({
            type: 'post',
            url: "http://wx.chuangyejia.com/mobile/apprentice/challenge/dozan",
            data: {
                tid: tid,
                sid: sid
            },
            dataType: 'json',
            error: function(data) {
                alert(JSON.stringify(data));
            },
            success: function(data) {
                if (data.code == 0) {
                    $("#zan").text(eval(parseInt(zan)+1));
                    alert('支持成功！');
                } else {
                    alert('您已经支持过了！');
                }
            }
        })
    });
});