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的更多相关文章

  1. Rewrite JSON project with Fetch

    上传 JSON 数据 使用fetch()来发布json编码的数据. var url = 'https://example.com/profile'; var data = {username: 'ex ...

  2. Using Fetch to rewrite JSON

    截图如下: html代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...

  3. Rewrite json

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  4. oracle 解析json格式

    1. CREATE OR REPLACE PACKAGE PKG_ANALYSE_COMMON IS -- AUTHOR : YZCHEN -- CREATED : 2013/11/26 14:12: ...

  5. 结合promise对原生fetch的两个then用法理解

    前言:该问题是由于看到fetch的then方法的使用,产生的疑问,在深入了解并记录对promise的个人理解 首先看一下fetch请求使用案例: 案例效果:点击页面按钮,请求当前目录下的arr.txt ...

  6. fetch初步了解

    前言 对于ajax请求,我们不仅可以使用XMLHTTPrequest,还可以使用fetch 正文 promise 在使用ajax时,如果想要使得第二个ajax请求调用第一个ajax请求,就得使用在on ...

  7. 使用 Fetch完成AJAX请求

    使用 Fetch完成AJAX请求 写在前面 无论用JavaScript发送或获取信息,我们都会用到Ajax.Ajax不需要刷新页面就能发送和获取信息,能使网页实现异步更新. 几年前,初始化Ajax一般 ...

  8. axios和fetch区别对比

    axios axios({ method: 'post', url: '/user/12345', data: { firstName: 'Fred', lastName: 'Flintstone' ...

  9. 第五节: 前后端交互之Promise用法和Fetch用法

    一. Promise相关 1.说明 主要解决异步深层嵌套的问题,promise 提供了简洁的API 使得异步操作更加容易 . 2.入门使用 我们使用new来构建一个Promise Promise的构造 ...

随机推荐

  1. 【转】Java中的新生代、老年代、永久代和各种GC

    JVM中的堆,一般分为三大部分:新生代.老年代.永久代: 1 新生代 主要是用来存放新生的对象.一般占据堆的1/3空间.由于频繁创建对象,所以新生代会频繁触发MinorGC进行垃圾回收. 新生代又分为 ...

  2. 第一章Java学习（查漏补缺）

    第一章主要内容: 1.Java的地位:网络地位 语言地位 需求地位 2.Java的特点:①简单 面向对象 平台无关:软件的运行不因操作系统,处理器的变化而无法运行或出现运行错误. ②多线程 动态 3. ...

  3. spring boot 业务场景简单，代码完整的demo们

    源码地址:https://github.com/zhzhair/spring-boot-examples.git 开发环境:windows,jdk8,spring boot2.1.4

  4. Mac环境下Redis的安装

    1.下载 官网下载地址:https://redis.io/download,选择对应的下载版本,我下载的是4.0.12 2.安装 1)下载文件解压后复制到/usr/local/目录下(快速找到路径小技 ...

  5. 十个推荐使用的 Laravel 的辅助函数

    壹. array_dot() array_dot () 辅助函数允许你将多维数组转换为使用点符号的一维数组. $array = [ 'user' => ['username' => 'so ...

  6. poj 3268 Silver Cow Party(最短路dijkstra）

    描述: One cow from each of N farms (1 ≤ N ≤ 1000) conveniently numbered 1..N is going to attend the bi ...

  7. LoadRunner运行错误集

    1.error-27796错误解决方法: 在负载生成器的注册表HKEY_LOCAL_MACHINE/SYSTEM/CurrentControlSet/Services/Tcpip/Parameters ...

  8. Kali Linux ——在无网络情况下安装无线网卡驱动

    1.背景: 今日刚刚开始学习kali linux,众所周知,安装完成后,系统是没有无线网卡驱动的,这就对学生党造成相当的困扰:校园网要连接有线是需要认证客户端的,而认证客户端只有windows端,如此 ...

  9. 关于Python 解包，你需要知道的一切

    解包在英文里叫做 Unpacking,就是将容器里面的元素逐个取出来(防杠精:此处描述并不严谨,因为容器中的元素并没有发生改变)放在其它地方,好比你老婆去菜市场买了一袋苹果回来分别发给家里的每个成员, ...

  10. C# 知识点回忆..

    方便查阅: 数据结构与算法 1.线性表: (1)数据结构2 - 线性表 (2)数据结构和算法 c#– 1.单项链表 委托和事件 委托1:C#4.0图解教程 - 第15章 委托 委托2:<C#本质 ...