客户端js 读取 json 数据

采用 XMLHttpRequest 读取。

1. new 初始化 XMLHttpRequest

2. open 设置请求方式，地址

3. send 发起请求

4.onload 请求成功，返回结果

代码：

<!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>

数据：

{"person":[{ "name": "云天河"   , "image" : "tianhe.png" },{ "name": "韩菱纱"   , "image" : "lingsha.png" },{ "name": "柳梦璃"   , "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" }]
}

客户端js 读取 json 数据相关推荐

JS读取JSON数据
实例 <script type="text/javascript" language="javascript">var languages = {c ...
js读取json文件片段中的数据
在html中利用js读取动态网站从服务器端返回的数据进行显示 1.js.html 页面需要引入执行jquery的js文件 <!DOCTYPE HTML PUBLIC "-//W3C ...
[js] localStorage 如何存储JSON数据并读取JSON数据
localStorage是HTML5提供的再客户端实现本地存储的一种方法,但是localStorage方法只能存储字符串数据,有时候我们需要存储对象到本地比如:JSON:那么,localStorage ...
JS解析json数据并将json字符串转化为数组的实现方法
json数据在ajax实现异步交互时起到了很重要的作用,他可以返回请求的数据,然后利用客户端的js进行解析,这一点体现出js的强大,本文介绍JS解析json数据并将json字符串转化为数组的实现方法, ...
FullCalendar 三：FullCalendar应用——读取JSON数据
开发者可以使用FullCalendar创建强大的日历日程应用,FullCalendar提供了丰富的选项设置和方法调用,使得开发者可以轻松的创建各种功能的日历程序.本文将结合实例使用PHP读取MySQl ...
android 读取json数据（遍历JSONObject和JSONArray）
android 读取json数据(遍历JSONObject和JSONArray) public String getJson(){ String jsonString = "{\" ...
当向后台插入或读取JSON数据遇见回车时
今天在项目中发现.当插入或读取JSON数据时遇见回车符.返回JSON数据格式时会报错(firebug里体现为乱码),百度了一下发现JSON不支持字符串里存在回车! 解决的方法: 在向接口插入带json ...
powershell 遍历json_如何从Powershell脚本读取JSON数据并遍历它
我开始学习Powershell,我正在尝试读取JSON文件.如何从Powershell脚本读取JSON数据并遍历它这里是我的JSON文件(名为"versions.json"): ...
js html 处理json数据,JS中Json数据的处理和解析JSON数据的方法详解
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于ECMAScript的一个子集. JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族 ...
JS解析json数据（json字符串和数组之间相互转换）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD ...

客户端js 读取 json 数据

客户端js 读取 json 数据相关推荐

最新文章

热门文章