close
<!--檔案：0914.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.meal{
border: 1px solid #aaa;
padding: 20px;
display: inline-block;
}
</style>
</head>
<body>
<div id="content"></div>
<script type="text/javascript">
var xhr = new XMLHttpRequest();
/*下面的open設定好，send過去後，
這個XMLHttpRequest物件的onload事件就會被觸發*/
xhr.onload=function(){
if(xhr.status===200){
/*全域變數不用宣告*/
responseObj=JSON.parse(xhr.responseText);
var DOMElement='';
for (var i = 0; i < responseObj.meals.length; i++) {
DOMElement+=
'<div class="meal"> <h2>主餐：'+responseObj.meals[i].main+'</h2> <h3>飲料：'+responseObj.meals[i].beverage+'</h3> <img src="'+responseObj.meals[i].pic+'"> <h2>價格：'+responseObj.meals[i].price+'</h2> </div>'
}//for
document.getElementById('content').innerHTML=DOMElement;
}//if
}//function
/*HTTP處理方法是GET，資料網址，指定資料傳輸模式*/
xhr.open('GET','data/0914.json',true);
/*無額外資訊發送*/
xhr.send(null);
</script>
</body>
</html>{
"comment":"檔案名稱：data/0914.json"
"meals":[
{
"main":"漢堡",
"beverage":"可樂",
"price":"500",
"pic":"https://api.fnkr.net/testimg/50x50/a00/FFF/?text=A"
},{
"main":"炸雞",
"beverage":"雪碧",
"price":"400",
"pic":"https://api.fnkr.net/testimg/50x50/0a0/FFF/?text=B"
},{
"main":"吐司",
"beverage":"紅茶",
"price":"300",
"pic":"https://api.fnkr.net/testimg/50x50/00a/FFF/?text=C"
}
]
}
全站熱搜
留言列表
伺服器架設 (1)
