當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JS动态加载JSON文件并读取数据
生活随笔
收集整理的這篇文章主要介紹了
JS动态加载JSON文件并读取数据
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
JSON(JavaScript Object Notation, JS 對象標記) 是一種輕量級的數據交換格式。它采用純文本格式來存儲和表示數據，層次結構簡潔和清晰，是理想的數據交換語言。JSON類似 XML，比 XML 更小、更快，更易解析。
關鍵詞：動態加載JSON文件、讀取JSON文件數據
demo.json文件內容
var json={"item1":"string","item2":["var1","var2","var3"]}這其實不是一個標準格式的json文件，而是在文件中自定義一個名為”json“的變量指向json數據，這里的”json“變量名可以在js代碼塊中直接使用。
test.html文件代碼
<!DOCTYPE html> <html> <head><script type="text/javascript">//動態創建一個“script”元素var script = document.createElement("script");script.type = "text/javascript";//設置創建的“script”元素的src屬性script.src = "demo.json";//將“script”元素加載到頁面中document.getElementsByTagName("head")[0].appendChild(script);//動態創建對象是異步執行的，所以必須要等到加載完成才能使用文件中的數據window.onload = function () {//這里的變量json出自JSON文件，不需要定義，可以直接使用console.log(json);//在頁面上分行顯示“string”和“var2”document.write(json.item1 + "<br />" + json.item2[1]);}</script> </head> <body> </body> </html>將以上兩個文件放在同一目錄下即可，edge瀏覽器測試成功。
總結
以上是生活随笔為你收集整理的JS动态加载JSON文件并读取数据的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Google开发者模式调试css样式的方
- 下一篇： 在线编程JavaScript