客户端js 读取 json 数据
生活随笔
收集整理的這篇文章主要介紹了
客户端js 读取 json 数据
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
?采用 XMLHttpRequest? 讀取。
1. new 初始化?XMLHttpRequest
2. open 設(shè)置請(qǐng)求方式，地址
3. send 發(fā)起請(qǐng)求
4.onload 請(qǐng)求成功，返回結(jié)果
代碼：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>js如何讀取json文件</title><script>window.onload = function () {var url = "index.json"var request = new XMLHttpRequest();request.open("get", url);request.send(null);request.onload = function () {if (request.status == 200) {var json = JSON.parse(request.responseText);var ol = document.getElementById('ol');var frag = document.createDocumentFragment();json.person.map(person => {var li = document.createElement("li");li.innerHTML = `名字是 ${person.name} 圖片是 ${person.image}`;frag.append(li);})ol.append(frag)}}}</script> </head><body><div><ol id="ol"></div> </body></html>數(shù)據(jù)：
{"person":[{ "name": "云天河" , "image" : "tianhe.png" },{ "name": "韓菱紗" , "image" : "lingsha.png" },{ "name": "柳夢(mèng)璃" , "image" : "mengli.png" },{ "name": "慕容紫英" , "image" : "ziying.png" },{ "name": "云天青" , "image" : "tianqing.png" },{ "name": "夙玉" , "image" : "suyu.png" },{ "name": "玄霄" , "image" : "xuanxiao.png" },{ "name": "夙瑤" , "image" : "suyao.png" },{ "name": "太清" , "image" : "taiqing.png" },{ "name": "宗煉" , "image" : "zonglian.png" },{ "name": "嬋幽" , "image" : "chanyou.png" },{ "name": "奚仲" , "image" : "xizhong.png" },{ "name": "歸邪" , "image" : "guixie.png" }] }總結(jié)
以上是生活随笔為你收集整理的客户端js 读取 json 数据的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： websocket onclose方法什
- 下一篇： dataGridview与下拉框高级绑定