点赞后，点赞按钮改变样式，获取需要的参数信息，然后通过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('您已经支持过了！');
}
}
})
});
});
