截图如下：
html代码如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 6 <meta name="viewport" content="width=device-width"> 7 8 <title>Fetch json example</title> 9 <style type="text/css"> 10 html { 11 font-family: sans-serif; 12 } 13 14 ul { 15 list-style-type: none; 16 display: flex; 17 flex-flow: column; 18 align-items: flex-start; 19 } 20 21 li { 22 margin-bottom: 10px; 23 background-color: pink; 24 font-size: 150%; 25 border-top: 3px solid pink; 26 border-bottom: 3px solid pink; 27 box-shadow: 5px 5px 5px rgba(0,0,0,0.7); 28 } 29 30 strong { 31 background-color: purple; 32 color: white; 33 padding: 0 8px; 34 border-top: 3px solid purple; 35 border-bottom: 3px solid purple; 36 text-shadow: 2px 2px 1px black; 37 } 38 </style> 39 <!--[if lt IE 9]> 40 <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> 41 <![endif]--> 42 </head> 43 44 <body> 45 <h1>Fetch json example</h1> 46 <ul> 47 </ul> 48 49 </body> 50 <script> 51 var myList = document.querySelector('ul'); 52 fetch('https://raw.githubusercontent.com/KylinBio-healthTechnology/lw/master/x.json') 53 .then(function(response) { 54 if (!response.ok) { 55 throw new Error("HTTP error, status = " + response.status); 56 } 57 return response.json(); 58 }) 59 .then(function(json) { 60 for(var i = 0; i < json.products.length; i++) { 61 var listItem = document.createElement('li'); 62 listItem.innerHTML = '<strong>' + json.products[i].Name + '</strong>'; 63 listItem.innerHTML +=' can be found in ' + json.products[i].Location + '.'; 64 listItem.innerHTML +=' Cost: <strong>£' + json.products[i].Price + '</strong>'; 65 myList.appendChild(listItem); 66 } 67 }) 68 .catch(function(error) { 69 var p = document.createElement('p'); 70 p.appendChild( 71 document.createTextNode('Error: ' + error.message) 72 ); 73 document.body.insertBefore(p, myList); 74 }); 75 </script> 76 </html>
json文件如下：https://raw.githubusercontent.com/KylinBio-healthTechnology/lw/master/x.json
1 { "products" : [ 2 { "Name": "Cheese", "Price" : 2.50, "Location": "Refrigerated foods"}, 3 { "Name": "Crisps", "Price" : 3, "Location": "the Snack isle"}, 4 { "Name": "Pizza", "Price" : 4, "Location": "Refrigerated foods"}, 5 { "Name": "Chocolate", "Price" : 1.50, "Location": "the Snack isle"}, 6 { "Name": "Self-raising flour", "Price" : 1.50, "Location": "Home baking"}, 7 { "Name": "Ground almonds", "Price" : 3, "Location": "Home baking"} 8 ]}