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. MySql8.0+全新身份验证方式

    我们在安装MySql8.0+的版本时MySql将会询问我们是否选择全新的身份验证方式,如下图 ⒈第一个是MySql推荐我们使用的强密码加密模式来进行身份验证 MySql8支持基于SHA256改进的更强 ...

  2. 支持向量机SVM——专治线性不可分

    SVM原理 线性可分与线性不可分 线性可分 线性不可分-------[无论用哪条直线都无法将女生情绪正确分类] SVM的核函数可以帮助我们: 假设‘开心’是轻飘飘的,“不开心”是沉重的 将三维视图还原 ...

  3. css悬浮提示框

    效果图: code: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  4. 使用Go语言编写区块链P2P网络(译)(转)

    转自:https://mp.weixin.qq.com/s/2daFH9Ej5fVlWmpsN5HZzw 外文链接: https://medium.com/coinmonks/code-a-simpl ...

  5. TableView+Button

    local MainScene = class("MainScene", cc.load("mvc").ViewBase) function MainScene ...

  6. linux shell脚本、命令学习

    1,echo "test" > test.txt    输出重定向到text.txt,文件不存在就创建 echo "test" >> test ...

  7. 华为AR2811配置脚本

    华为AR28-11基本配置 # sysname Quidway # super password level simple admin --设置super用户password,级别,密码显示方式(明文 ...

  8. 公司外网测试服务器 redis 被攻击复盘

    最近 公司外网的测试的 redis 服务器被攻击,最开始是用 docker 搭建的 直接裸奔在外网,任何域名都可以通过 ip+6379来访问,最开始想的是测试服务器也没有啥,后面直接就被人登陆进去改了 ...

  9. selenium笔记(1)

    selenium笔记(1) 一.关闭页面:1.driver.close() 关闭当前页面2.driver.quit() 退出整个浏览器 二.定位元素:1.find_element_by_id: 根据i ...

  10. [原创]windows 部署SS server 出现的错误.

    安装过程: .Download and install Python MSI installer in 64bit Windows. .During installation you should i ...