$.ajax()json左右数据获取（依联）

$.ajax()数据说明：http://www.cnblogs.com/xiangzhong/archive/2012/11/06/2757969.html

其中，HTML代码为：

<div class="clearfix">
     <!--左侧-->
     <div class="list-hd">
          <ul id="J_listNav">
              <li data-id="0" class="cur">应季热批</li>
              <li data-id="289">女装</li>
              <li data-id="292">男装</li>
              <li data-id="293">童装</li>
              <li data-id="344">内衣</li>
              <li data-id="345">衣饰</li>
              ...
          </ul>
     </div>
     <!--/左侧-->
     <!--右侧-->
     <div id="J_listBd" class="list-bd">
          <dl id="J_list0">
              <dd>
                  <a href="">
                     <span class="pic-wrap"><img data-proportion="1-1" class="J_bigPipe" lazy_src="http://img.eelly.com/G01/M00/00/8C/oYYBAFXVgJqISA8NAABLYlgwCncAAA2zgB9whEAAEt6325.png" alt="棉衣棉服" /></span>
                     <span class="list-tt">棉衣棉服</span>
                  </a>
              </dd>
              ...
          </dl>
     </div>
     <!--/右侧-->
</div>

CSS代码为：

body{ font-size: 62.5%;}
.u-mobile-page{ min-width: 320px; max-width: 640px; margin: auto; background: #f5f5f5; position: relative;}
.list-hd{ float: left; width: 21.3%; padding-right: 1.5%;}
.list-hd li{ line-height: 3.6rem; font-size: 1.3rem; font-weight: 700; border-width: 0 1px 1px 0; border-style: solid; border-color: #ddd; background: #f0f0f0; text-align: center; color: #888;}
.list-hd li.cur{ background: #fff; color: #ee3356; border-right: 1px solid #f5f5f5;}
.list-bd{ float: left; width: 75.5%; margin-right: 1.5%; margin-bottom: 2rem;}
.list-bd dd{ float: left; width: 30%; margin: 1.5rem 5% 0 0; background: #f5f5f5;}
.list-bd dd a,.list-bd dd .pic-wrap{ width: 100%; display: block;}
.list-bd dd img{ width: 100%;}
.list-bd .list-tt{ display: block; text-align: center; margin-top: 1rem; font-size: 1.3rem; color: #333; line-height: 1.8rem; height: 1.8rem; width: 100%; overflow: hidden;}

JS代码为：

var listIndex = {
    J_listNav: $('#J_listNav'),
    J_listBd: $('#J_listBd'),
    req_lock: 1,
    init: function() {
        var _self = this;
        _self.J_listNav.find('li').on('click', 
        function() {
            _self.goList($(this));
        });
    },
    goList: function(J_list)
    {
        if (J_list.hasClass('cur')) {
            return false;
        }
        var cur_list = listIndex.J_listNav.parent().find('.cur');
        var cur_id = cur_list.attr('data-id');
        var next_id = J_list.addClass('cur').attr('data-id');
        if (($('#J_list' + next_id).length == 0) && (listIndex.req_lock == 1))
        {
            var req_url = gUrl.mobile + '\/category-' + next_id + '.html';
            listIndex.req_lock = 0;
            $.ajax({
                type: 'GET',
                url: req_url,
                dataType: 'json',
                success: function(data) {
                    listIndex.req_lock = 1;
                    if (data.code == 0)
                    {
                        var arySub = data.retval[0].subCate;
                        listIndex.createList(arySub, next_id);
                        $('#J_list' + cur_id).hide();
                        $('#J_list' + next_id).show();
                        changeLazy();
                        cur_list.removeClass('cur');
                        J_list.addClass('cur');
                    }
                },
                error: function(xhr, type, err) {}
            });
        }
        else
        {
            $('#J_list' + cur_id).hide();
            $('#J_list' + next_id).show();
            cur_list.removeClass('cur');
            J_list.addClass('cur');
        }
    },
    createList: function(ary, id) {
        var _len = ary.length;
        var _html = '<dl id="J_list' + id + '" class="none">';
        for (var i = 0; i <= _len - 1; i++)
        {
            var oo = ary[i];
            var grid_class = ((i + 1) % 3 == 0) ? ' class="grid-0"': '';
            _html += '<dd' + grid_class + '>\
                <a href="/s-category-' + oo.cateId + '.html">\
                <span class="pic-wrap"><img data-proportion="1-1" class="J_bigPipe" lazy_src="' + oo.cateImage + '"/></span>\
                <span class="list-tt">' + oo.cateName + '</span>\
                </a>\
            </dd>';
        };
        _html += '</dl>';
        listIndex.J_listBd.append($(_html));
    }
}
$(function() {
    listIndex.init();
});

效果图为：

文件地址为：http://m.eelly.com/category-292.html

http://m.eelly.com/category-{id}.html