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的构造 ...
随机推荐
- [经验交流] kubernetes v1.11 更新了高可用方案
kubernetes v1.11已经发布了一段时间,和以前相比,一个显著亮点是更新了高可用方案: https://kubernetes.io/docs/setup/independent/high-a ...
- python 机器学习三剑客 之 Matplotlib
Matplotlib介绍: Matplotlib 是一个 Python 的 2D绘图库,它以各种硬拷贝格式和跨平台的交互式环境生成出版质量级别的图形 . 通过 Matplotlib,开发者可以仅需要几 ...
- spring boot 业务场景简单，代码完整的demo们
源码地址:https://github.com/zhzhair/spring-boot-examples.git 开发环境:windows,jdk8,spring boot2.1.4
- 前端笔记知识点整合之JavaScript（三）关于条件判断语句、循环语句那点事
一.条件分支语句 条件分支语句,也叫作条件判断语句,就是根据某种条件执行某些语句,不执行某些语句. JS中有三种语法是可以表示条件分支的 1.1 if……else…… 条件分支的主力语法,这个主力 ...
- Union 与 Union all 的区别【坑】
UNION操作符用于合并两个或多个SELECT语句的结果集 请注意,UNION 内部的 SELECT 语句必须拥有相同数量的列.列也必须拥有相似的数据类型.同时,每条 SELECT 语句中的列的顺序必 ...
- vscode中tab键无法触发emmet快捷生成
1.file——preference——setting 2.点击user setting的extensions 3.点击emmet 4.emmet下的edit in settings.json.添加代 ...
- inotify+rsync文件实时同步报错：usr/local/bin/inotifywait: error while loading shared libraries: libinotifytools.so.0:
解决办法: ln -sv /usr/local/lib/libinotify* /usr/lib/ /usr/lib64/libinotifytools.so.
- js获取当前时间并实时刷新
效果如图: 代码如下: <html> <head> <title>js获取当前时间并实时刷新</title> <script> //页面加载 ...
- 获取Shell脚本当前的目录
https://qiushao.net/article/1489983836453?p=1&m=0 SCRIPT_DIR=$(cd $(dirname ${BASH_SOURCE[0]}); ...
- No enclosing instance of type Test is accessible. Must qualify the allocation with an enclosing instance of type Test (e.g. x.new A() where x is an instance of Test).
Java编写代码过程中遇到了一个问题,main方法中创建内部类的实例时,编译阶段出现错误,查看错误描述: No enclosing instance of type Test is accessibl ...