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

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

0

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代码:


$(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('您已经支持过了!');
                }
            }
        })
    });
});

你可能感兴趣的:(zepto实现点赞、发送请求修改数据)