版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/lily2016n/article/details/79220204
json
{
"lists": [
{
"num": "4003000001",
"logo": "已发货",
"pic": [
{
"img": "img/goumai.png",
"name": "方便面",
"price": "6",
"height": "800g/袋",
"number": "1"
},
{
"img": "img/goumai.png",
"name": "绿茶1",
"price": "7",
"height": "600g/袋",
"number": "2"
},
{
"img": "img/goumai.png",
"name": "绿茶2",
"price": "7",
"height": "600g/袋",
"number": "2"
}
],
"createtime": "2017-09-01",
"count": "2",
"yun": "60.0",
"pay": "90"
},
{
"num": "4003000002",
"logo": "未发货",
"pic": [
{
"img": "img/goumai.png",
"name": "营养快线",
"price": "6",
"height": "800g/瓶",
"number": "1"
},
{
"img": "img/goumai.png",
"name": "红茶",
"price": "7",
"height": "600g/袋",
"number": "3"
}
],
"createtime": "2017-09-05",
"count": "2",
"yun": "60.0",
"pay": "90"
},
{
"num": "4003000003",
"logo": "已发货",
"pic": [
{
"img": "img/goumai.png",
"name": "咖啡豆",
"price": "6",
"height": "800g/袋",
"number": "1"
},
{
"img": "img/goumai.png",
"name": "牛奶",
"price": "7",
"height": "600g/袋",
"number": "1"
}
],
"createtime": "2017-09-09",
"count": "2",
"yun": "60.0",
"pay": "90"
},
{
"num": "4003000004",
"logo": "已发货",
"pic": [
{
"img": "img/goumai.png",
"name": "绿茶1",
"price": "3",
"height": "1000ml/瓶",
"number": "1"
},
{
"img": "img/goumai.png",
"name": "绿茶2",
"price": "4",
"height": "1000ml/瓶",
"number": "1"
}
],
"createtime": "2017-09-21",
"count": "2",
"yun": "60.0",
"pay": "90"
}
]
}html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta content="yes" name="app-moblie-web-app-capable">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/master.css">
</head>
<body>
<div class="lists">
<!-- <div class="info">
<div class="order">
<span class="num">订单编号: 12345678901</span>
<span class="state">待发货</span>
</div>
<div class="info-material">
<div class="pic_one">
<img src="img/goumai.png"/>
<div class="info_one">
<span class="name">蓝山咖啡</span>
<span class="money">¥ 89.9</span>
</div>
<div class="info_two">
<span class="height">净含量: 800g/袋</span>
<span class="count">x1</span>
</div>
</div>
</div>
<div class="details">
<p>下单时间: 2017-09-01 12:12:12</p>
<p>共2件商品 运费合计 ¥ 60.0</p>
<p>实付 ¥ 89.9</p>
</div>
</div> -->
</div>
</body>
<script type="text/javascript" src="js/jquery-1.12.3.js"></script>
<script type="text/javascript" src="js/myjs.js"></script>
<script type="text/javascript">
$(function(){
$.ajax({
type:'GET',
url:'js/details.json', //请求数据的地址
dataType:'json', //返回数据形式为json
success:function(result){ //请求成功时执行该函数内容，result即为服务器返回的json对象
var json = result.lists;
var result = '';
$.each(json,function(index){
var Num = json[index].num;
var Logo = json[index].logo;
var Pic = json[index].pic;
var Time = json[index].createtime;
var Count = json[index].count;
var money = json[index].yun;
var Pay = json[index].pay;
var t = '';
if (Pic.length > 0) {
$.each(Pic,function(i){
var Img = Pic[i].img;
var Name = Pic[i].name;
var Price = Pic[i].price;
var Quality = Pic[i].height;
var Number = Pic[i].number;
t += '<div class="info-material">'+
'<div class="pic_one">'+
'<img src= '+ Img +'/>'+
'<div class="info_one">'+
'<span class="name">'+ Name +'</span>'+
'<span class="money">¥'+ Price +'</span>'+
'</div>'+
'<div class="info_two">'+
'<span class="height">净含量: '+ Quality +'</span>'+
'<span class="count">x'+ Number +'</span>'+
'</div>'+
'</div>'+
' </div>'
})
}
result += ' <div class="info">'+
' <div class="order">'+
'<span class="num">订单编号: '+ Num +'</span>'+
'<span class="state">'+ Logo +'</span>'+
' </div>'+ t +
' <div class="details">'+
'<p>下单时间: '+ Time +'</p>'+
'<p>共2件商品 运费合计 ¥ '+ money +'</p>'+
'<p>实付 ¥ '+ Pay +'</p>'+
' </div>'+
'</div>'
})
$('.lists').html(result);
},
error: function (errorMsg) {
//请求失败时执行该函数
alert("发生错误!");
}
})
})
</script>
</html>效果图
