ajax数据读取展示

html部分

<div class="list-wrap">
	<ul class="list-box">
    </ul>
</div>

js部分

//function ajax(url,data,callback){//如果有不同的url 可以通过注释的部分传不同的url
$.ajax({
    url: 'json数据路径',
    type: 'get',
    dataType: 'json',
    //data:data, 
    jsonp: 'callback',
    async: false,
    success: function (data) {
        //callback(r);
        dataList(data)
    },
    error: function () {
        var errorE = ' <ul class="errorE"><li>抱歉，没有找到符合您要求的数据</li></ul> ';
        $('.list-wrap').html(errorE)
    }
});
//}

function dataList(data) {
    //ajax('assets/js/text.json',{},function(data){
    //var tagCon = "";
    var tagData = "";
    var list = data.imgListData;
 
    var conlist = '<ul class="list-box">'
    for (var i = 0; i < list.length; i++) {
        var index_list = list[i]
        // console.log(index_list);
       var tagCon = "" 
 
        for (var j = 0; j < index_list.tag.length; j++) {
            tagData = index_list.tag[j].tags;
            //console.log(tagData)
            tagCon += '<span class="tag_' + j + '">' + tagData + '</span>';
        }
 
        conlist += '<li>' +
            '<a class="list-pic"><img src="' + list[i].imgUrl + '" /></a>' +
            '<div class="list-con">' +
            '<h2><a>' + list[i].title + '</a></h2>' +
            '<div class="list-info">' +
            '<p class="info-con">' +
            '<i class="icon icon-huxing"></i>' +
            '<span>' + list[i].content + '</span>' +
            '</p>' +
            '<p class="info-con">' +
            '<i class="icon icon-time"></i>' +
            '<span>' + list[i].room + '</span>' +
            '<span>' + list[i].adrs + '</span>' +
            '</p>' +
            '<p class="info-con"><i class="icon icon-address"></i>' + list[i].dataTimes + '发布</p>' +
            '<p class="tag">' + tagCon + '</p>' +
            '<div class="price-box">' +
            '<p class="wan"><span>' + list[i].money + '</span>万</p>' +
            '<p class="dan">' + list[i].unitprice + '元/m²</p>' +
            '</div>' +
            '</div>' +
            '</div>' +
            '</li>'
 
    }
    conlist += '</ul>';
 
    $('.list-wrap').html(conlist)
 
    //});
};

json数据格式

{
  "imgListData": [
    {
      "id": "1",
      "title": "标题描述",
      "content": "内容描述 ",
      "city": "详细地址",
      "adrs": "上海",
      "room": "楼房描述",
      "imgUrl": "图片地址",
      "dataTimes": "时间",
      "peo": "姓名",
      "tel": "手机号",
      "pho": "照片地址",
      "money": "价格",
      "unitprice": "单价",
      "tag": [
        {
          "tags": "标签一"
        },{
          "tags": "标签七"
        },{
          "tags": "标签八"
        }
      ]
    },
    {
      "id": "2",
      "title": "标题描述",
      "content": "内容描述 ",
      "city": "详细地址",
      "adrs": "上海",
      "room": "楼房描述",
      "imgUrl": "图片地址",
      "dataTimes": "时间",
      "peo": "姓名",
      "tel": "手机号",
      "pho": "照片地址",
      "money": "价格",
      "unitprice": "单价",
      "tag": [
        {
          "tags": "标签二"
        },{
          "tags": "标签六"
        },{
          "tags": "标签七"
        }
      ]
    }
  ]
}

css

body{background:#fff;color:#333;}
body,ul,ol,dl,dd,p,h1,h2,h3,h4,h5,h6,form,input,textarea,select,td,th{margin:0;padding:0;}
body,textarea,input,select{font-size:14px;font-family:"Microsoft YaHei",Tahoma,Arial,"Hiragino Sans GB","\5b8b\4f53",sans-serif;}
h1,h2,h3,h4,h5,h6{font-weight:normal;}
li{list-style:none;}
img{border:none;display:block;}
em,i{font-style:normal;}
textarea{resize:none;overflow:auto;}
textarea,input,select{outline:none;}
tabel{border-collapse:collapse;}
a{text-decoration:none;color:#333;-moz-transition:all .2s linear;-webkit-transition:all .2s linear;-o-transition:all .2s linear;transition:all .2s linear;}
a:focus{outline:none;}
a,area{blr:expression(this.onFocus=this.blur());}
input[type=submit],input[type=reset],input[type=button]{filter:chroma(color=#000000);}

/*clear*/
.clear:after{content:".";height:0;display:block;clear:both;visibility:hidden;}
.clear{_zoom:1;*display:inline-block;}

/*ellipsis*/
.ellipsis{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}

/*border-radius*/
.border-radius{-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}

/*list*/
.list-wrap{width:1000px;margin:20px auto;}

.list-box li{overflow:hidden;position:relative;margin-bottom:20px;}

.list-pic{float:left;width:240px;height:196px;border-radius:4px;}
.list-pic img{width:240px;height:196px;border-radius:4px;}

.list-con{float:left;width:600px;margin-left:20px;}
.list-con h2{margin-bottom:16px;overflow:hidden;}
.list-con h2 a{float:left;max-width:500px;font-size:20px;line-height:30px;font-weight:bold;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.list-con h2 a:hover{color:#1c8fff;}

.list-info p{color:#666;padding:7px 0;vertical-align:middle;}
.list-info .icon{display:inline-block;vertical-align:2px;margin-right:5px;width:8px;height:8px;    border-radius:3px;}
.info-con span{padding-right:10px;}
.list-info .tag{font-size:12px;padding-left:26px;}
.tag span{display:inline-block;padding:4px 10px;/*background:#DFEFFF;color:#1c8fff;*/border-radius:4px;margin-right:10px;}

.price-box{position:absolute;right:0;top:54px;color:#666;text-align:right;}
.price-box .wan{color:#FF6666;}
.price-box .wan span{font-size:30px;font-weight:bold;}
.price-box .dan{padding-top:10px;}

.icon-huxing{background:#c1c5f9;}
.icon-time{background:#f1cfb0;}
.icon-address{background:#f2c1f3;}
.tag span{color:#fff;}
.tag .tag_0{background:#c3dbf3;}
.tag .tag_1{background:#fbd08f}
.tag .tag_2{background:#fdd2d5;}
.tag .tag_3{background:#add2a5;}

 

运行结果