Rewrite JSON with Fetch
1.重写json请求部分：
HTML文件代码如下：
<html>
......
<script>
var myList = document.querySelector(‘ul‘);
fetch(‘https://raw.githubusercontent.com/Bulalalala-Ly/package/master/rewrite.json‘)
.then(function(response) {
if (!response.ok) {
throw new Error("HTTP error, status = " + response.status);
}
return response.json();
})
.then(function(json) {
for(var i = 0; i < json.members.length; i++) {
var listItem = document.createElement(‘li‘);
listItem.innerHTML = ‘<strong>‘ + json.members[i].Name + ‘</strong>‘;
listItem.innerHTML +=‘ age ‘ + json.members[i].Age + ‘.‘;
listItem.innerHTML +=‘ work‘ + json.members[i].Work + ‘</strong>‘;
myList.appendChild(listItem);
}
})
.catch(function(error) {
var p = document.createElement(‘p‘);
p.appendChild(
document.createTextNode(‘Error: ‘ + error.message)
);
document.body.insertBefore(p, myList);
});
</script>
</html>
2.json文件代码如下：
{ "members" : [
{
"Name": "liyang",
"Age" : 27,
"Work": "Refrigerated foods"
},
{
"Name": "xiaohui",
"Age" : 30,
"Work": "the Snack isle"
},
{
"Name": "huanghai",
"Age" : 41,
"Work": "Refrigerated foods"
}
]
Rewrite JSON with Fetch的更多相关文章
- Rewrite JSON project with Fetch
上传 JSON 数据 使用fetch()来发布json编码的数据. var url = 'https://example.com/profile'; var data = {username: 'ex ...
- Using Fetch to rewrite JSON
截图如下: html代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...
- Rewrite json
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- oracle 解析json格式
1. CREATE OR REPLACE PACKAGE PKG_ANALYSE_COMMON IS -- AUTHOR : YZCHEN -- CREATED : 2013/11/26 14:12: ...
- 结合promise对原生fetch的两个then用法理解
前言:该问题是由于看到fetch的then方法的使用,产生的疑问,在深入了解并记录对promise的个人理解 首先看一下fetch请求使用案例: 案例效果:点击页面按钮,请求当前目录下的arr.txt ...
- fetch初步了解
前言 对于ajax请求,我们不仅可以使用XMLHTTPrequest,还可以使用fetch 正文 promise 在使用ajax时,如果想要使得第二个ajax请求调用第一个ajax请求,就得使用在on ...
- 使用 Fetch完成AJAX请求
使用 Fetch完成AJAX请求 写在前面 无论用JavaScript发送或获取信息,我们都会用到Ajax.Ajax不需要刷新页面就能发送和获取信息,能使网页实现异步更新. 几年前,初始化Ajax一般 ...
- axios和fetch区别对比
axios axios({ method: 'post', url: '/user/12345', data: { firstName: 'Fred', lastName: 'Flintstone' ...
- 第五节: 前后端交互之Promise用法和Fetch用法
一. Promise相关 1.说明 主要解决异步深层嵌套的问题,promise 提供了简洁的API 使得异步操作更加容易 . 2.入门使用 我们使用new来构建一个Promise Promise的构造 ...
随机推荐
- 使用Sales_data类
写一段程序程序实现求两次交易相加结果的功能.程序的输入是下面这两条交易记录: 0-201-783456-X 3 20.00 0-201-783456-X 3 25.00 程序的结构如下: #inclu ...
- Mac环境下Scrapy的安装
直接命令安装: $ easy_install scrapy 从 GitHub 安装: $ git clonehttps://github.com/scrapy/scrapy.git $ cd scra ...
- anylogic 常用模块及术语的使用
1.1 存量 创建存量变量 1. 在调色板视图下的Model页面中选择Stock 元素. 2. 在图形化编辑器中您所期望的位置点击鼠标,放置该存量. 3. 在属性视图下的Equation部分中,定义该 ...
- cadence学习二----->Allegro基本概念
Class与Subclass 同一根线在不同的Subclass里的含义不一样,下面介绍常用Class和Subclass的含义 1.Etch 包括TOP和BOTTOM,用于走线和覆铜 2.Package ...
- win10下安装Cygwin配置gcc编译环境
首先要说明的是,我个人安装cygwin的用途是为了使用kenlm工具训练通及语言模型. 注:统计语言模型工具有比较多的选择,目前比较好的有srilm以及kenlm,其中kenlm比srilm晚出来,训 ...
- python 视频转成代码视频
# -*- coding:utf-8 -*- # coding:utf-8 import os, cv2, subprocess, shutil from cv2 import VideoWriter ...
- C#获取用户登录IP地址
public static string GetUserIp() { string ip; string[] temp; bool isErr = false ...
- Python迭代器、生成器
迭代器 iterator # 只要是能被for循环的数据类型 就一定拥有__iter__方法 # 迭代器多了的方法 print(set(dir([].__iter__()))-set(dir([])) ...
- openv
https://www.cnblogs.com/xishuai/p/centos-openvpn.html https://www.cnblogs.com/biaopei/category/11029 ...
- PHP实现域名授权的两种方法-转
01. 在线校验域名授权的方法: 客户端代码: PHP <?php //获取不带端口号的域名前缀 $servername = trim($_SERVER['SERVER_NAME'] ...