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. CSS字体渐变 & 隐藏浏览器滚动条 & grid布局（转载）

    字体渐变  https://www.zhangxinxu.com/study/201104/css3-text-gradient-2.html 隐藏浏览器滚动条  https://blog.csdn. ...

  2. 补记：完成了NG的SP1的全部内容 开始第二周

    DL本质上就是多层的Logistics Regression with different activation function and nicely designed back propagati ...

  3. Week_10 C

    拓扑排序 Week_10    C 题意:输入n行数据a,b  ,表示a的钱数大于b的钱数,最低的人分的的钱数为888,问最少需要多少钱可以分给员工 思路:标准的拓扑排序,不过这题需要逆向拓扑 注意点 ...

  4. java 日常学习记录-反射

    Hero类 package helloworld; public class Hero { public String name; //姓名 public float hp; //血量 public ...

  5. Python——类与对象，异常处理

    类 class C1: def setdata(self,value): self.data = value def display(self): print(self.data) class C2( ...

  6. unity iOS本地代码总结（一）

    1. 项目能直接运行了,但是代码的实际数据流动任然会有问题. 2. unity的代码能这么简单的被调用简直是奇迹一样,不需要大的改动就能够使用. 3. 目前需要注意的问题就是,unity的内容还太少, ...

  7. Docker----与Asp.net core 的完美结合,在docker容器中创建Asp.Net Core 项目

    在腾讯云上买了一个小容量的服务器,搭建一个docker环境后,可以尝试做一些单系统做起来很麻烦的东西.譬如说,你在windows OS或UbuntuOS中,突然想玩CentOS了,你可以选择将电脑再装 ...

  8. 总结web自动化测试页面常用字段的定位方法

    在一次编写web自动脚本时,突然想到web页面常有的字段有:输入框,按钮,富文本输入框,下拉框选项,弹窗,表格,上传文件以及时间插件,以下总结的没有编写时间插件的用例了!以后碰到再更新, 以下是蹩脚代 ...

  9. 企业SVN版本控制服务器搭建

    服务器端配置 svn安装部署 查看系统环境 cat /etc/redhat-release uname -a 安装svn yum install -y subversion 配置并启动svn 建立sv ...

  10. Windows Internals 笔记——线程优先级

    1.每个线程都被赋予0(最低)~31(最高)的优先级数.当系统确定给哪个线程分配CPU时,它会首先查看优先级为31的线程,并以循环的方式进行调度.如果有优先级为31的线程可供调度,那么系统就会将CPU ...