ajax请求嵌套多层json数据实例
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
<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>Documenttitle>
<link rel="stylesheet" type="text/css" href="css/master.css">
head>
<body>
<div class="lists">
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 += ''+
''+
'![](</span>+ Img +<span class="hljs-string">)
'+
''+
''+ Name +''+
'¥'+ Price +''+
''+
''+
'净含量: '+ Quality +''+
'x'+ Number +''+
''+
''+
' '
})
}
result += ' '+
' '+
'订单编号: '+ Num +''+
''+ Logo +''+
' '+ t +
' '+
'下单时间: '
+ Time +''+
'共2件商品 运费合计 ¥ '
+ money +''+
'实付 ¥ '
+ Pay +''+
' '+
''
})
$('.lists').html(result);
},
error: function (errorMsg) {
//请求失败时执行该函数
alert("发生错误!");
}
})
})
script>
html>效果图
源码地址 http://download.csdn.net/download/lily2016n/10234021