json与js一起使用代码示例">JSON与JS一起使用代码示例
前提
js livecodeserver">前提,建立一个文件夹,这个文件夹设置为公开的,允许被访问的,然后在该文件夹中
建立一个js-keyword">text.json文件,
里面用json语法写出正确的语句放入js-keyword">text.json文件夹中,然后在该文件夹中再建立一个后缀名为html文件json">AJAX1.json
js json">{"js-attribute">address":js-value">js-string">"泗泾镇九干路168号","js-attribute">shopList":js-value">[{"js-attribute">name":js-value">js-string">"众一品过桥米线","js-attribute">cd":js-value">[{"js-attribute">title":js-value">js-string">"黄焖鸡大份微辣","js-attribute">pir":js-value">js-string">"20",
"js-attribute">pl":js-value">[js-string">"土豆",js-string">"鸡肉",js-string">"姜",js-string">"青椒"]},{"js-attribute">title":js-value">js-string">"黄焖鸡大份中辣","js-attribute">pir":js-value">js-string">"20","js-attribute">pl":js-value">[js-string">"土豆",js-string">"鸡肉",js-string">"姜",js-string">"尖椒"]},
{"js-attribute">title":js-value">js-string">"黄焖鸡大份重辣","js-attribute">pir":js-value">js-string">"20","js-attribute">pl":js-value">[js-string">"土豆",js-string">"鸡肉",js-string">"姜",js-string">"5个尖椒"]}]},
{"js-attribute">name":js-value">js-string">"众一品黄焖鸡","js-attribute">cd":js-value">[{"js-attribute">title":js-value">js-string">"肥牛米线","js-attribute">pir":js-value">js-string">"20","js-attribute">pl":js-value">[js-string">"米线",js-string">"青菜",js-string">"肥牛",js-string">"豆芽"]},
{"js-attribute">title":js-value">js-string">"鱼豆腐米线","js-attribute">pir":js-value">js-string">"18","js-attribute">pl":js-value">[js-string">"米线",js-string">"青菜",js-string">"鱼豆腐",js-string">"豆芽"]},
{"js-attribute">title":js-value">js-string">"香菇米线","js-attribute">pir":js-value">js-string">"16","js-attribute">pl":js-value">[js-string">"米线",js-string">"青菜",js-string">"香菇",js-string">"豆芽"]}]},
{"js-attribute">name":js-value">js-string">"众一品黄焖鸡","js-attribute">cd":js-value">[{"js-attribute">title":js-value">js-string">"肥牛米线","js-attribute">pir":js-value">js-string">"20","js-attribute">pl":js-value">[js-string">"米线",js-string">"青菜",js-string">"肥牛",js-string">"豆芽"]},
{"js-attribute">title":js-value">js-string">"鱼豆腐米线","js-attribute">pir":js-value">js-string">"18","js-attribute">pl":js-value">[js-string">"米线",js-string">"青菜",js-string">"鱼豆腐",js-string">"豆芽"]},{"js-attribute">title":js-value">js-string">"香菇米线","js-attribute">pir":js-value">js-string">"16","js-attribute">pl":js-value">[js-string">"米线",js-string">"青菜",js-string">"香菇",js-string">"豆芽"]}]},
{"js-attribute">name":js-value">js-string">"众一品黄焖鸡","js-attribute">cd":js-value">[{"js-attribute">title":js-value">js-string">"肥牛米线","js-attribute">pir":js-value">js-string">"20","js-attribute">pl":js-value">[js-string">"米线",js-string">"青菜",js-string">"肥牛",js-string">"豆芽"]},
{"js-attribute">title":js-value">js-string">"鱼豆腐米线","js-attribute">pir":js-value">js-string">"18","js-attribute">pl":js-value">[js-string">"米线",js-string">"青菜",js-string">"鱼豆腐",js-string">"豆芽"]},
{"js-attribute">title":js-value">js-string">"香菇米线","js-attribute">pir":js-value">js-string">"16","js-attribute">pl":js-value">[js-string">"米线",js-string">"青菜",js-string">"香菇",js-string">"豆芽"]}]},
{"js-attribute">name":js-value">js-string">"众一品黄焖鸡","js-attribute">cd":js-value">[{"js-attribute">title":js-value">js-string">"肥牛米线","js-attribute">pir":js-value">js-string">"20","js-attribute">pl":js-value">[js-string">"米线",js-string">"青菜",js-string">"肥牛",js-string">"豆芽"]},
{"js-attribute">title":js-value">js-string">"鱼豆腐米线","js-attribute">pir":js-value">js-string">"18","js-attribute">pl":js-value">[js-string">"米线",js-string">"青菜",js-string">"鱼豆腐",js-string">"豆芽"]},
{"js-attribute">title":js-value">js-string">"香菇米线","js-attribute">pir":js-value">js-string">"16","js-attribute">pl":js-value">[js-string">"米线",js-string">"青菜",js-string">"香菇",js-string">"豆芽"]}]}]}text.html
js xml">js-doctype"><!DOCTYPE html>
js-tag"><js-title">html js-attribute">lang=js-value">"en">
js-tag"><js-title">head>
js-tag"><js-title">meta js-attribute">charset=js-value">"UTF-8" />
js-tag"><js-title">title>JSONjs-tag"></js-title">title>
js-tag"><js-title">style>
js-class">.onejs-rules">{
js-rule">js-attribute">text-align:js-value">center;
js-rule">js-attribute">overflow:js-value">hidden;
js-rule">js-attribute">width:js-value">js-number">700px;
js-rule">js-attribute">margin:js-value">js-number">0px auto;
js-rule">js-attribute">padding-left:js-value">js-number">20px;
js-rule">}
js-class">.divAjs-rules">{
js-rule">js-attribute">text-align:js-value">center;
js-rule">}
js-class">.divBjs-rules">{
js-rule">js-attribute">text-align:js-value">left;
js-rule">js-attribute">border:js-value">js-number">1px blue solid;
js-rule">}
js-class">.twojs-rules">{
js-rule">js-attribute">padding-left:js-value">js-number">10px;
js-rule">js-attribute">float:js-value">left;
js-rule">js-attribute">width:js-value">js-number">320px;
js-rule">js-attribute">margin-right:js-value">js-number">10px;
js-rule">js-attribute">margin-top:js-value">js-number">10px;
js-rule">js-attribute">margin-bottom:js-value">js-number">10px;
js-rule">js-attribute">padding-bottom:js-value">js-number">10px;
js-rule">}
js-class">.threejs-rules">{
js-rule">js-attribute">float:js-value">left;
js-rule">js-attribute">padding-bottom:js-value">js-number">5px;
js-rule">js-attribute">margin-left:js-value">js-number">5px;
js-rule">js-attribute">margin-top:js-value">js-number">10px;
js-rule">}
js-class">.img1js-rules">{
js-rule">js-attribute">background-image:js-value">js-function">url(js-number">1.jpg);
js-rule">js-attribute">background-size:js-value">js-number">150px js-number">100px;
js-rule">js-attribute">height:js-value">js-number">100px;
js-rule">js-attribute">border:js-value">js-number">1px red solid;
js-rule">}
js-tag"></js-title">style>
js-tag"></js-title">head>
js-tag"><js-title">body>
js-tag"></js-title">body>
js-tag"><js-title">script js-attribute">type=js-value">"text/javascript">
js-keyword">var request = js-keyword">new XMLHttpRequest();
request.open(js-string">"GET",js-string">"text.json",js-literal">true);
request.send();
request.onreadystatechange=js-function">js-keyword">functionjs-params">(){
js-keyword">if(request.readyState==js-number">4 && request.status==js-number">200){
js-keyword">var list = request.responseText;
console.log(list);
js-keyword">var listObj = js-built_in">JSON.parse(list);
js-keyword">var body = document.getElementsByTagName(js-string">'body')[js-number">0];
js-keyword">var div1 = document.createElement(js-string">"div");
js-keyword">var divA = document.createElement(js-string">"div");
js-keyword">var divB = document.createElement(js-string">"div");
div1.className=js-string">"one";
divA.className=js-string">"divA";
div1.style.border=js-string">"1px blue solid";
divA.innerHTML = js-string">"地址:" + listObj.address;
divB.innerHTML = js-string">"商家:";
divB.className = js-string">"divB";
body.appendChild(div1);
div1.appendChild(divA);
div1.appendChild(divB);
js-keyword">for(js-keyword">var i=js-number">0; i<listObj.shopList.length;i++){
js-keyword">var shop = listObj.shopList[i];
js-keyword">var div2 = document.createElement(js-string">"div");
div2.className=js-string">"two";
js-keyword">var h4 = document.createElement(js-string">"h4");
div2.style.border=js-string">"1px red solid";
div1.appendChild(div2);
div2.appendChild(h4);
h4.innerHTML = shop.name;
js-keyword">for(js-keyword">var j=js-number">0; j<shop.cd.length;j++){
js-keyword">var div3 = document.createElement(js-string">"div");
div2.appendChild(div3);
div3.style.width=js-string">"150px";
div3.className=js-string">"three";
div3.style.border=js-string">"1px black solid";
js-keyword">var cd = shop.cd[j];
div3.innerHTML = cd.title;
js-keyword">var img = document.createElement(js-string">"div");
img.className=js-string">"img1";
div3.appendChild(img);
js-keyword">var div4 = document.createElement(js-string">"div");
div4.innerHTML = cd.pir;
div3.appendChild(div4);
js-keyword">var div8 = document.createElement(js-string">"div");
div8.innerHTML = js-string">"配料:";
js-keyword">for(js-keyword">var k=js-number">0; k<cd.pl.length;k++){
div8.innerHTML = div8.innerHTML + cd.pl[k];
}
div3.appendChild(div8);
}
}
}
}
js-tag"></js-title">script>
js-tag"></js-title">html>结果截图
![[Java 基础] 并发队列ConcurrentLinkedQueue和阻塞队列LinkedBlockingQueue用法](/images/no-images.jpg)
