您的位置：首页 > Web前端 > JavaScript

JSON与JS一起使用代码示例

2018-03-18 19:26 531 查看

JSON与JS一起使用代码示例

前提

前提,建立一个文件夹,这个文件夹设置为公开的,允许被访问的,然后在该文件夹中
建立一个text.json文件,
里面用json语法写出正确的语句放入text.json文件夹中,然后在该文件夹中再建立一个后缀名为html文件


AJAX1.json

{"address":"泗泾镇九干路168号","shopList":[{"name":"众一品过桥米线","cd":[{"title":"黄焖鸡大份微辣","pir":"20",
"pl":["土豆","鸡肉","姜","青椒"]},{"title":"黄焖鸡大份中辣","pir":"20","pl":["土豆","鸡肉","姜","尖椒"]},
{"title":"黄焖鸡大份重辣","pir":"20","pl":["土豆","鸡肉","姜","5个尖椒"]}]},
{"name":"众一品黄焖鸡","cd":[{"title":"肥牛米线","pir":"20","pl":["米线","青菜","肥牛","豆芽"]},
{"title":"鱼豆腐米线","pir":"18","pl":["米线","青菜","鱼豆腐","豆芽"]},
{"title":"香菇米线","pir":"16","pl":["米线","青菜","香菇","豆芽"]}]},
{"name":"众一品黄焖鸡","cd":[{"title":"肥牛米线","pir":"20","pl":["米线","青菜","肥牛","豆芽"]},
{"title":"鱼豆腐米线","pir":"18","pl":["米线","青菜","鱼豆腐","豆芽"]},{"title":"香菇米线","pir":"16","pl":["米线","青菜","香菇","豆芽"]}]},
{"name":"众一品黄焖鸡","cd":[{"title":"肥牛米线","pir":"20","pl":["米线","青菜","肥牛","豆芽"]},
{"title":"鱼豆腐米线","pir":"18","pl":["米线","青菜","鱼豆腐","豆芽"]},
{"title":"香菇米线","pir":"16","pl":["米线","青菜","香菇","豆芽"]}]},
{"name":"众一品黄焖鸡","cd":[{"title":"肥牛米线","pir":"20","pl":["米线","青菜","肥牛","豆芽"]},
{"title":"鱼豆腐米线","pir":"18","pl":["米线","青菜","鱼豆腐","豆芽"]},
{"title":"香菇米线","pir":"16","pl":["米线","青菜","香菇","豆芽"]}]}]}


text.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>JSON</title>
<style>
.one{
text-align:center;
overflow:hidden;
width:700px;
margin:0px auto;
padding-left:20px;

}
.divA{
text-align:center;
}
.divB{
text-align:left;
border:1px blue solid;
}
.two{
padding-left:10px;
float:left;
width:320px;
margin-right:10px;
margin-top:10px;
margin-bottom:10px;
padding-bottom:10px;
}
.three{
float:left;
padding-bottom:5px;
margin-left:5px;
margin-top:10px;
}
.img1{
background-image:url(1.jpg);
background-size:150px 100px;
height:100px;
border:1px red solid;
}
</style>
</head>

<body>
</body>
<script type="text/javascript">
var request = new XMLHttpRequest();
request.open("GET","text.json",true);
request.send();
request.onreadystatechange=function(){
if(request.readyState==4 && request.status==200){
var list = request.responseText;
console.log(list);
var listObj = JSON.parse(list);
var body = document.getElementsByTagName('body')[0];
var div1 = document.createElement("div");
var divA = document.createElement("div");
var divB = document.createElement("div");
div1.className="one";
divA.className="divA";
div1.style.border="1px blue solid";
divA.innerHTML = "地址:" + listObj.address;
divB.innerHTML = "商家:";
divB.className = "divB";
body.appendChild(div1);
div1.appendChild(divA);
div1.appendChild(divB);
for(var i=0; i<listObj.shopList.length;i++){
var shop = listObj.shopList[i];
var div2 = document.createElement("div");
div2.className="two";
var h4 = document.createElement("h4");
div2.style.border="1px red solid";
div1.appendChild(div2);
div2.appendChild(h4);
h4.innerHTML = shop.name;
for(var j=0; j<shop.cd.length;j++){
var div3 = document.createElement("div");
div2.appendChild(div3);
div3.style.width="150px";
div3.className="three";
div3.style.border="1px black solid";
var cd = shop.cd[j];
div3.innerHTML = cd.title;
var img = document.createElement("div");
img.className="img1";
div3.appendChild(img);
var div4 = document.createElement("div");
div4.innerHTML = cd.pir;
div3.appendChild(div4);
var div8 = document.createElement("div");
div8.innerHTML = "配料:";
for(var k=0; k<cd.pl.length;k++){
div8.innerHTML = div8.innerHTML + cd.pl[k];
}
div3.appendChild(div8);
}
}
}
}
</script>
</html>


结果截图





内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  js json
相关文章推荐
新的分享
章节导航