search

博客列表 >JS对象-JSON转换，XHR 实例演示，Fetch API 与 async, await 实例演示

JS对象-JSON转换，XHR 实例演示，Fetch API 与 async, await 实例演示

赵大叔
赵大叔原创
2022年01月14日 00:14:41632浏览

JSON 基础知识

  • json 是通用的,轻量化的 “数据交互格式”,用于 “前后端数据通信”
  • json 独立于编程语言,本质是一个格式化字符串
  • json 借用了 js 对象字面量的语法,简洁高效,已替代了传统的 xml 格式
  • json 不是 js 对象, 但它可以与 js 对象之间相互转换
  • json 数据类型: 不支持 undefined ,没意义的数据类型
  • json: 本质就是 js 对象的序列化, 字符串表示
  • js 对象[前端] -> json 字符串[后端], js 对象的序列化

JSON.stringify: obj -> json, JS 对象转为 json 字符串

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>JSON基础知识</title>
  8.   </head>
  9.   <body></body>
  10.   <script>
  11.     // JS对象
  12.     const staff = {
  13.       id: 1,
  14.       name: "DASHU",
  15.       email: "help_10086@foxmail.com",
  16.       isMarried: "0",
  17.       gender: "0",
  18.       bophan: "HR-Dept",
  19.       congviec: "HR",
  20.       salary: 20000000,
  21.       /* toJSON() {
  22.         // 只返回 name,email
  23.           return `name:${this.name}, email=${this.email}`;
  24.         }, */
  25.     };
  27.     // console.log(staff);
  28.     // console.log(typeof staff);
  30.     // 1、序列化json: JSON.stringify
  31.     let jsonStr = JSON.stringify(staff);
  32.     // 第二个参数: array, callback
  33.     // array
  34.     jsonStr = JSON.stringify(staff, ["name", "email"]);
  35.     // callback,做一些操作
  36.     jsonStr = JSON.stringify(staff, (key, value) => {
  37.       switch (key) {
  38.         case "gender":
  39.           return value === "0" ? "男" : "女";
  40.         case "salary":
  41.           return undefined;
  42.         default:
  43.           return value;
  44.       }
  45.     });
  47.     // 第三个参数: 格式化
  48.     jsonStr = JSON.stringify(staff, null, 2);
  49.     jsonStr = JSON.stringify(staff, null, "**");
  50.     console.log(jsonStr);
  51.     // console.log(typeof jsonStr);
  53.     // JSON字符串
  54.     // verify: https://www.bejson.com/
  56.     // 1. 所有属性必须使用双引号
  57.     // 2. 字符类型的值必须使用双引号
  58.     // 3. 不能有undefined
  59.     // 4. 最后一个值后不能有逗号
  60.     const siteInfo = `
  61.         {
  62.           "name":"PHP中文网",
  63.           "domain":"https://www.php.cn",
  64.           "isRecord":true,
  65.           "email":"498668472@qq.com",
  66.           "address":"合肥市政务新区蔚蓝商务港",
  67.           "category":["视频","文章","资源"],
  68.           "lesson": {
  69.             "name": "第18期Web全栈线上培训班",
  70.             "price": 4800,
  71.             "content": ["JavaScript", "PHP", "ThinkPHP"]
  72.           }
  73.         }
  74.       `;
  75.   </script>
  76. </html>

JSON.parse: json->obj, json 字符串转为 JS 对象

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>JSON基础知识</title>
  8.   </head>
  9.   <body></body>
  10.   <script>
  11.     // JSON字符串
  12.     // verify: https://www.bejson.com/
  14.     // 1. 所有属性必须使用双引号
  15.     // 2. 字符类型的值必须使用双引号
  16.     // 3. 不能有undefined
  17.     // 4. 最后一个值后不能有逗号
  18.     const siteInfo = `
  19.         {
  20.           "name":"PHP中文网",
  21.           "domain":"https://www.php.cn",
  22.           "isRecord":true,
  23.           "email":"498668472@qq.com",
  24.           "address":"合肥市政务新区蔚蓝商务港",
  25.           "category":["视频","文章","资源"],
  26.           "lesson": {
  27.             "name": "第18期Web全栈线上培训班",
  28.             "price": 4800,
  29.             "content": ["JavaScript", "PHP", "ThinkPHP"]
  30.           }
  31.         }
  32.       `;
  34.     // 2、jsonStr -> jsObj: json字符串[后端] -> js对象[前端]
  35.     // JSON.parse
  37.     // 以前用eval
  38.     let site = eval("(" + siteInfo + ")");
  39.     console.log(site, typeof site);
  41.     site = JSON.parse(siteInfo);
  42.     site = JSON.parse(siteInfo, function (key, value) {
  43.       // console.log(key, "=>", value);
  44.       if (key === "email" || key === "address") {
  45.         delete this[key];
  46.       } else {
  47.         return value;
  48.       }
  49.     });
  50.     console.log(site);
  52.     // js obj 渲染到页面中
  53.     let html = `
  54.         <li>网站名称: ${site.name}</li>
  55.         <li>网站域名: ${site.domain.slice(8)}</li>
  56.         <li>是否备案: ${site.isRecord ? "已备案" : "未备案"}</li>
  57.         <li>服务内容:
  58.           <ul>
  59.             <li style="color:red">1. arry.map()</li>
  60.             ${site.category.map((cate) => `<li>${cate}</li>`).join("")}
  61.             <li style="color:red">2. arry.reduce()</li>
  62.             ${site.category.reduce((acc, cur) => `${acc}</li><li>${cur}`, "")}
  63.           </ul>
  64.         </li>
  65.         <li>课程信息:
  66.           <ul>
  67.             <li style="color:red"> 1: 根据键名获取值</li>
  68.              ${Object.keys(site.lesson)
  69.                .map((key) => `<li>${site.lesson[key]}</li>`)
  70.                .join("")}
  72.                <li style="color: red"> 2: 直接获取值</li>
  73.              ${Object.values(site.lesson)
  74.                .map((less) => `<li>${less}</li>`)
  75.                .join("")}
  76.           </ul>
  77.         </li>
  78.       `;
  80.     const ul = document.createElement("ul");
  81.     ul.innerHTML = html;
  82.     document.body.append(ul);
  83.   </script>
  84. </html>

[http://help10086.cn/0110/demo1.html]

传统 XHR 实例演示

    1. 创建对象: new XMLHttpRequest();
    1. 响应类型: xhr.responseType = “json”;
    1. 配置参数: xhr.open(“GET”, url, true);
    1. 请求回调: xhr.onload = () => console.log(xhr.response);
    1. 失败回调: xhr.onerror = () => console.log(“Error”);
    1. 发起请求: xhr.send(null);-
  • xhr 至少监听 2 个事件: load,error, 调用 2 个函数: open,send
  • post 请求,需要设置一下请求头与请求的数据,其它与 get 请求完全相同
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <script src="funcShow.js"></script>
  8.     <title>ajax-xhr</title>
  9.   </head>
  10.   <body style="display: grid; gap: 1em">
  11.     <button style="width:166px;" onclick="getStaff1(this)">
  12.       获取员工信息 - XHR
  13.     </button>
  14.     <script>
  15.       // 1. 传统 XHR,是一个对象
  16.       /**
  17.        * 1. 创建对象: new XMLHttpRequest();
  18.        * 2. 响应类型: xhr.responseType = "json";
  19.        * 3. 配置参数: xhr.open("GET", url, true);
  20.        * 4. 请求回调: xhr.onload = () => console.log(xhr.response);
  21.        * 5. 失败回调: xhr.onerror = () => console.log("Error");
  22.        * 6. 发起请求: xhr.send(null);
  23.        *
  24.        * xhr 至少监听2个事件: load,error, 调用2个函数: open,send
  25.        * post请求,需要设置一下请求头与请求的数据,其它与get请求完全相同
  26.        */
  28.       function getStaff1(btn) {
  29.         // 1. 创建对象:
  30.         const xhr = new XMLHttpRequest();
  31.         // 2. 响应类型:
  32.         xhr.responseType = "json";
  33.         // 3. 配置参数:
  34.         let url = "http://help10086.cn/0110/staffs.php";
  35.         // url = "http://help10086.cn/0110/staffs.php?msnv=900101";
  36.         xhr.open("GET", url, true);
  37.         // 4. 请求回调:
  38.         xhr.onload = () => {
  39.           console.log(xhr.response);
  40.           // 渲染到页面中
  41.           render(xhr.response, btn);
  42.         };
  43.         // 5. 失败回调:
  44.         xhr.onerror = () => console.log("Error");
  45.         // 6. 发起请求:
  46.         xhr.send(null);
  47.       }
  48.     </script>
  49.   </body>
  50. </html>

[http://help10086.cn/0110/demo2.html]

Fetch API 与 async, await 实例演示

  • 语法:
    fetch(…)
    .then(…)
    .then(…)
    .catch(…)
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <script src="funcShow.js"></script>
  8.     <title>Fetch API</title>
  9.   </head>
  10.   <body>
  11.     <button onclick="getStaff(this)">获取用户信息 - Fetch</button>
  13.     <script>
  14.       // 实际开发中, 通常不会直接去用Promise,用fetch
  15.       // axios : 基于 xhr
  16.       // fetch : 基于 promise, 返回一个Promise对象
  18.       // console.log(fetch());
  20.       /* fetch("https://jsonplaceholder.typicode.com/users")
  21.         .then(response => response.json())
  22.         .then(json => console.log(json)); */
  24.       fetch("http://help10086.cn/0110/staffs.php")
  25.         .then((response) => response.json())
  26.         .then((json) => console.log(json));
  28.       // 同域: 协议相同, 域名相同,端口相同,否则就是跨域请求
  30.       // ECMA2017, async, await, 来简化了fetch , 实现同步的方式来编写异步代码
  32.       // 异步函数,内部有异步操作
  33.       async function getStaff(btn) {
  34.         let url = "http://help10086.cn/0110/staffs.php";
  35.         // url = "http://help10086.cn/0110/staffs.php?msnv=900101";
  36.         //await: 表示后面是一个异步请求,需要等待结果
  37.         const response = await fetch(url);
  38.         // response响应对象,json():将返回的数据转为json
  39.         const result = await response.json();
  41.         console.log(result);
  43.         // 渲染到页面中
  44.         render(result, btn);
  45.       }
  46.     </script>
  47.   </body>
  48. </html>

[http://help10086.cn/0110/demo6.html]

上一条：带你读懂什么是云服务器，游戏网站需要什么样的云服务器？下一条：js的自定义dataset对象 ,js操作css， js中事件的添加与删除
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多