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. linux下动态链接库(.so)的显式调用和隐式调用

    进入主题前,先看看两点预备知识. 一.显式调用和隐式调用的区别 我们知道,动态库相比静态库的区别是:静态库是编译时就加载到可执行文件中的,而动态库是在程序运行时完成加载的,所以使用动态库的程序的体积要 ...

  2. Jquery验证码倒计时

    html代码: <input type="button" value="获取验证码" id="getCode" style=" ...

  3. SQLAlchemy+Flask-RESTful使用(四)

    前言 顺利出到4啦,其实学习过程中发现了不少错误,不过有些实在是没啥代表性. 最近买了两本小程序和安卓方面的书,其实从初中开始,想搞编程的目的就是写些安卓软件. 现在看来不太可能了.拿来当当兴趣爱好还 ...

  4. django会话

    django会话 可以把会话理解为客户端与服务器之间的一次会晤,在一次会话过程中有多次请求和响应,但是由于HTTP协议的特性-->无状态,每次浏览器的请求都是无状态的,无法保存状态信息,也就是说 ...

  5. 【算法】Normalization

    Normalization(归一化) 写这一篇的原因是以前只知道一个Batch Normalization,自以为懂了.结果最近看文章,又发现一个Layer Normalization,一下就懵逼了. ...

  6. 经验分享：PDF怎么提取页面

    PDF文件的页面有很多但有需要的并不是全部,有时候需要其中一页或几页的时候,这个时候我们就需要把单独的页面提取出来,这个时候应该怎么做呢,上次有小伙伴来询问小编,今天小编就为大家分享一下小编自己的编辑 ...

  7. python集合操作

    一:python官方文档 https://docs.python.org/3.6/library/stdtypes.html#set-types-set-frozenset 二:集合概念 集合是无序的 ...

  8. Netty 学习系列

    Netty实现httpserver简单示例 3个Java类实现最基本的接收请求,响应一个文本的简单http服务器. https://www.cnblogs.com/demingblog/p/99707 ...

  9. 【JavaScript】 使用Async 和 Promise 完美解决回调地狱

    很久以前就学习过Async和Promise,但总是一知半解的. 今天在写NodeJS的时候,发现好多第三方库使用回调,这样在实际操作中会出现多重回调,这就是传说中的JS回调地狱. 举个例子 有一个方法 ...

  10. 《ServerSuperIO Designer IDE使用教程》-4.增加台达PLC驱动及使用教程，从0到1的改变。发布：v4.2.3版本

    v4.2.3 更新内容:1.优化数据存储部分,提高效率.2.修复数据库服务停止造成程序异常退出的现象.3.修复本机没有串口造成无法增加设备驱动的情况.4.增加编辑设备和监测点配置信息功能.5.增加台达 ...