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. less封装样式有规律的类选择器-遁地龙卷风

    1.解决的问题 .class-rule(p,2,width 20px animation-dely 0.1s);可以生成下列css样式 .p2 { animation-dely: 0.2s; widt ...

  2. Apple Tree POJ - 2486 （树形dp）

    题目链接: D - 树形dp  POJ - 2486 题目大意:一颗树,n个点(1-n),n-1条边,每个点上有一个权值,求从1出发,走V步,最多能遍历到的权值 学习网址:https://blog.c ...

  3. 关于操作HDFS的一个问题

    近日写程序定时任务调Hadoop MR程序,然后生成报表,发送邮件,当时起了两个任务A和B,调MR程序之前,会操作hdfs(读写都有),任务A每天一点跑,任务B每十分钟跑一次,B任务不会调用MR程序, ...

  4. rsyncd启动脚本

    #!/bin/bash ############################################################## # File Name: -.sh # Versi ...

  5. windows 安装docker报错：Error checking TLS connection: ssh command error: command : ip addr show

    今天安装docker部署的时候总是再报这个错误. 报错的原因是初始化的时候出错了. 在docker 安装目录下有一个文件,如下图所示 将它复制到你电脑用户名目录下生成.docker 的文件夹中,如下图 ...

  6. sql 常见错误总结

    1.根据一张表更新另一张表的数据. . 写法轻松,更新效率高: update table1 set field1=table2.field1, field2=table2.field2 from ta ...

  7. TestNg框架基础入门

    TestNg框架简介: TestNG,即Testing, Next Generation,下一代测试技术,是一套根据JUnit 和NUnit思想而构建的利用注释来强化测试功能的一个测试框架.TestN ...

  8. python获取设备主机名和IP地址

    import socket def print_machine_info(): host_name = socket.gethostname() ip_address = socket.gethost ...

  9. git自动部署到服务器

    1.现在服务器配置空仓库 mkdir -p test/project.git chmod 777 test cd test/project.git/ git init --bare . cd .. c ...

  10. Charles使用心得总结

    一.下载/安装/配置 1.1下载并安装Charles. mac版和window版都有,下载可以去Charles官网(http://www.charlesproxy.com/download/),下载下 ...