js進階ajax讀取json數據（ajax讀取json和讀取普通文本，和獲取服務器返回數據（鏈接）都是一樣的，在url處放上json文件的地址即可）
一、總結
ajax讀取json和讀取普通文本，和獲取服務器返回數據（鏈接）都是一樣的，在url處放上json文件的地址即可
var lii=document.createElement('li'); //3、dom動態創建元素document.createElement
div1.appendChild(lii) //4、dom動態給元素添加孩子
var obj=JSON.parse(str) //2、解析json：將json從字符串轉化為數組或對象
二、js進階ajax讀取json數據
json中數據：
1 [ 2 { 3 "name":"張三", 4 "id":123456, 5 "sex":"男", 6 "VIP":"lv1" 7 }, 8 { 9 "name":"李四", 10 "id":123457, 11 "sex":"男", 12 "VIP":"lv3" 13 }, 14 { 15 "name":"李麗", 16 "id":123458, 17 "sex":"女", 18 "VIP":"lv2" 19 } 20 ]
html代碼
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>ajax01</title> 6 <style type="text/css"> 7 div{ 8 background: rgba(30,100,30,0.3); 9 width: 500px; 10 height: 500px; 11 letter-spacing: 5px; 12 padding: 5px 13 } 14 15 </style> 16 <script type="text/javascript" src="ajax1.js"></script> 17 </head> 18 <body> 19 <input type="button" id="btn" value="測試按鈕"> 20 <div id="div1"></div> 21 <script> 22 var btn=document.getElementById('btn'); 23 var div1=document.getElementById('div1'); 24 btn.onclick=function (){ 25 ajax('data.json',function(str){ //1、ajax讀取json和讀取普通文本，和讀取鏈接都是一樣的，在url處放上json文件的地址即可 26 var obj=JSON.parse(str) //2、解析json：將json從字符串轉化為數組或對象 27 //alert(typeof obj) 28 for(var i in obj){ 29 for(var j in obj[i]){ 30 // div1.innerHTML+=j+':'+obj[i][j]+'<br>'; 31 var lii=document.createElement('li'); //3、dom動態創建元素document.createElement 32 lii.innerHTML=j+':'+obj[i][j]; 33 div1.appendChild(lii) //4、dom動態給元素添加孩子 34 } 35 36 } 37 38 },function(s){ 39 alert(s) 40 }) 41 } 42 </script> 43 </body> 44 </html>