$.getJSON() 请求点赞或点踩的效果

构建数据通讯的桥梁：getJSON()

getJSON(url,[data],[callback])
url (String) 发送请求地址
data (Map) (可选) 待发送 Key/value 参数
callback (Function) (可选) 载入成功时回调函数。

JSON是一种理想的数据传输格式，它能够很好的融合与JavaScript或其他宿主语 言，并且可以被JS直接使用。使用JSON相比传统的通过 GET、POST直接发送”裸体”数据，在结构上更为合理，也更为安全。至于jQuery的getJSON()函数，只是设置了JSON参数的 ajax()函数的一个简化版本。这个函数也是可以跨域使用的，相比get()、post()有一定优势。另外这个函数可以通过把请求url写 成”myurl?callback=X”这种格式，让程序执行回调函数X。

$.getJSON('feed.jsp',{
   request: images,
   id:      001,
   size:    large
   }, function(json) {
    alert(json.images[0].link);
    //此处json就是远程传回的json对象，假设其格式如下：
    //{'images' : [
    // {link: images/001.jpg, x :100, y : 100},
    // {link: images/002.jpg, x : 200, y 200:}
    //]};
   }
 );

其中$.getJSON(url,{},function(){})与$.get(url,{},function(){},'json')与$.get(url,{},function(){var data=JSON.parse(data);})等价！

其中HTML代码为：

<div class="fire_ice">
            <div class="fire_icon"><span><i>{$like_num}</i>人</span></div>
            <div class="fi_icon"><i style="width:{$like_percent}"></i><em style="width:{$unlike_percent}"></em></div>
            <div class="ice_icon"><span style="color:#bcd5fd;text-align:center;"><i>{$unlike_num}</i>人</span></div>
        </div>

JS代码为：

$(function(){
  //zhuanti
        $('.fire_ice .fire_icon').click(function(){
          $.getJSON('/portal.php?mod=topic&topicid=5&action=like',function(data){
               if(data.success == 1){
                    $('.fire_icon i').text(data.like);
                    $('.ice_icon i').text(data.unlike);
                    $('.fi_icon').find('i').css("width",data.like_percent *100 +'%');
                    $('.fi_icon').find('em').css("width",data._percent *100 +'%');
               }else{
                   showWindow('login','member.php?mod=logging&action=login');
               }
          });
        });
        $('.fire_ice .ice_icon').click(function(){
          $.getJSON('/portal.php?mod=topic&topicid=5&action=unlike',function(data){
               if(data.success == 1){
                    $('.fire_icon i').text(data.like);
                    $('.ice_icon i').text(data.unlike);
                    $('.fi_icon').find('i').css("width",data.like_percent *100 +'%');
                    $('.fi_icon').find('em').css("width",data._percent *100 +'%');
               }else{
                   showWindow('login','member.php?mod=logging&action=login');
               }
          });
        });
})

或者为

function changeFireIceRadio(data) {
        jQuery('.fire_icon i').text(data.like);
        jQuery('.ice_icon i').text(data.unlike);
        var container = jQuery('.fi_icon');
        container.find('i').css('width', data.like_percent * 100 + '%');
        container.find('em').css('width', (1 - data.like_percent) * 100 + '%');
    }
    jQuery('.fire_icon').click(function () {
        jQuery.getJSON('/portal.php?mod=topic&topicid=5&action=like', function (data) {
            if (data.success) {
                changeFireIceRadio(data);
            } else {
                jQuery('#btn_login_simple').click();
            }
        });
    });
    jQuery('.ice_icon').click(function () {
        jQuery.getJSON('/portal.php?mod=topic&topicid=5&action=unlike', function (data) {
            if (data.success) {
                changeFireIceRadio(data);
            } else {
                jQuery('#btn_login_simple').click();
            }
        });
    });

效果图为：

没登陆前跟登陆后

 

链接为:http://www.5usport.com/portal.php?mod=topic&topicid=5&action=unlike