欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

json转js与js转json以及练习了ajax-xhr/fetch异步通讯以及模块常识,其中Promise状态及Promise中的Fetch API部分暂时还没进行示例学习操作

程序员文章站 2022-03-27 09:06:33
...

JSON与js对象方法互转

用到了俩函数
JSON.stringify js转json
JSON.parse json转js
示例代码:

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <title>json加长版</title>
  7. </head>
  8. <body>
  9. <script>
  10. // js对象转前端json
  11. const ad = {
  12. name: "老卢",
  13. email: "123456@qq.com",
  14. gender: "male",
  15. salary: 123456,
  16. // toJSON() {
  17. // return `name:${this.name},email:${this.email}`;
  18. // },
  19. };
  20. // console.log(ad.toJSON());
  21. // 返回了老卢和邮箱
  22. // 序列号json:JSON.stringify
  23. // JSON.stringify支持对json序列化的格式化,,后面增加一个nell空,2是空格或者别的符号,默认是空格
  24. let jsonstr = JSON.stringify(ad, null, 2);
  25. console.log(jsonstr);
  26. // 第二个参数 array,callback
  27. // array 以数组方式限制返回,
  28. jsonstr = JSON.stringify(ad, ["name", "gender"]);
  29. // 看到结果只返回了名字跟性别
  30. console.log(jsonstr);
  31. //callback 还可以以方法的形式去控制输出
  32. jsonstr = JSON.stringify(ad, function (key, value) {
  33. switch (key) {
  34. // 这里根据键来判断
  35. // 键是性别
  36. case "gender":
  37. // 返回的值是male,那就是男的,其他默认女的
  38. return value === "male" ? "男" : "女";
  39. // 如果查询的是工资 返回一个undefined,在json是不允许undefined的
  40. case "salary":
  41. return undefined;
  42. // 其他默认返回值
  43. default:
  44. return value;
  45. }
  46. });
  47. console.log(jsonstr);
  48. // 第三个参数:参数的格式化
  49. jsonstr = JSON.stringify(ad, null, 2);
  50. console.log(jsonstr); //默认两个空格
  51. jsonstr = JSON.stringify(ad, null, "**");
  52. console.log(jsonstr); //把空格格式换为**
  53. // 2. jsonStr -> jsObj: json字符串[后端] -> js对象[前端]
  54. // JSON.parse
  55. // 1. 所有属性必须使用双引号
  56. // 2. 字符类型的值必须使用双引号
  57. // 3. 不能有undefined
  58. // 4. 最后一个值后不能有逗号
  59. //////////////////////////////////////////
  60. /////////////json转js/////////////////////
  61. /////////////使用JSON.parse(siteinfo)/////
  62. //声明一个json对象
  63. const siteInfo = `
  64. {
  65. "name":"PHP中文网",
  66. "domain":"https://www.php.cn",
  67. "isRecord":true,
  68. "email":"498668472@qq.com",
  69. "address":"合肥市政务新区蔚蓝商务港",
  70. "category":["视频","文章","资源"],
  71. "lesson": {
  72. "name": "第18期Web全栈线上培训班",
  73. "price": 4800,
  74. "content": ["JavaScript", "PHP", "ThinkPHP"]
  75. }
  76. }
  77. `;
  78. console.log(siteInfo); //已经是json格式,转成js格式
  79. let site = JSON.parse(siteInfo);
  80. console.log(site);
  81. site = JSON.parse(siteInfo, function (key, value) {
  82. // 如果键返回email或者address 则删除
  83. if (key === "email" || key === "address") {
  84. delete this[key];
  85. } else {
  86. return value;
  87. }
  88. });
  89. console.log(site);
  90. let html = `
  91. <li> 网站名称:${site.name} </li>
  92. <li>网站域名:${site.domain.slice(8)}</li>
  93. <li>网站备案:${site.isRecord ? "已备案" : "未备案"}</li>
  94. <li>联系邮箱:${site.email}</li>
  95. <li>联系地址:${site.address}</li>
  96. <li>服务内容:<ul>
  97. <li style="color:red">1. arry.map()</li>
  98. ${site.category
  99. .map(function (value) {
  100. return "<li>" + value + "</li>";
  101. }) //.join将元素数组,转成换字符串
  102. .join("")}
  103. <li style="color:red">2. arry.reduce()</li>
  104. ${site.category.reduce((acc, cur) => `${acc}</li><li>${cur}`, "")}
  105. </ul></li>
  106. <li>课程信息:
  107. <ul>
  108. <li style="color:red"> 1: 根据键名获取值</li>
  109. ${Object.keys(site.lesson).map(function (key) {
  110. //根据键返回值
  111. `<li>${site.lesson[key]}</li>`;
  112. })}
  113. <li style="color: red"> 2: 直接获取值</li>
  114. ${Object.values(site.lesson)
  115. .map(less => `<li>${less}</li>`)
  116. .join("")}
  117. </ul>
  118. `;
  119. /////开始渲染到页面,新建一个ul标签
  120. const ul = document.createElement("ul");
  121. ul.innerHTML = html; //html塞到ul下面
  122. document.body.append(ul); //将ul塞到body里面
  123. </script>
  124. <!-- Object.values 与之相反 -->
  125. <!-- let person = {name:"张三",age:25,address:"深圳",getName:function(){}}
  126. Object.keys(person).map((key)=>{   person[key] // 获取到属性对应的值,做一些处理 }) -->
  127. </body>
  128. </html>

示例截图:
json转js与js转json以及练习了ajax-xhr/fetch异步通讯以及模块常识,其中Promise状态及Promise中的Fetch API部分暂时还没进行示例学习操作
json转js与js转json以及练习了ajax-xhr/fetch异步通讯以及模块常识,其中Promise状态及Promise中的Fetch API部分暂时还没进行示例学习操作

ajax-xhr/fetch异步通讯
代码部分:

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <title>ajax-xhr-fetch异步</title>
  7. </head>
  8. <button onclick="getUser1(this)">查询用户信息 - XHR</button>
  9. <button onclick="getUser2(this)">查询用户信息 - Fetch</button>
  10. <body></body>
  11. <script>
  12. // 1. 传统 XHR
  13. /**
  14. * 1. 创建对象: new XMLHttpRequest();
  15. * 2. 响应类型: xhr.responseType = "json";
  16. * 3. 配置参数: xhr.open("GET", url, true);
  17. * 4. 请求回调: xhr.onload = () => console.log(xhr.response);
  18. * 5. 失败回调: xhr.onerror = () => console.log("Error");
  19. * 6. 发起请求: xhr.send(null);
  20. *
  21. * xhr 至少监听2个事件: load,error, 调用2个函数: open,send
  22. * post请求,需要设置一下请求头与请求的数据,其它与get请求完全相同
  23. */
  24. function getUser1(btn) {
  25. // 创建一个对象
  26. const xhr = new XMLHttpRequest();
  27. // 数据类型,当前获取到的数据类型 例如是json
  28. xhr.responseType = "json";
  29. // 请求的类型方式,是post还是get 包括请求的url,这里的url暂定,一会声明一个
  30. let url = "http://website.io/users.php";
  31. url = "http://website.io/users.php?id=2";
  32. xhr.open("GET", url, true);
  33. //返回成功后需要处理的步骤(老师说是回调) 请求成功用xhr.onload
  34. xhr.onload = () => {
  35. console.log(xhr.response);
  36. render(xhr.response, btn); //将结果渲染到bth按钮输出到页面中,render在function.js里面的定义的一个函数
  37. }; //结果是储存到xhr.response中,所以你可以对结果进行预处理
  38. //返回失败后需要处理的步骤(失败的回调) 请求失败用xhr.onerror
  39. xhr.onerror = () => console.log("Error"); //失败的回调,也可以渲染到页面中,比如提示给用户失败
  40. // 最后发起请求
  41. xhr.send(null);
  42. }
  43. // 2. 现代 Fetch
  44. /** 语法:
  45. fetch(...)//请求的url
  46. .then(...)请求成功返回的数据,
  47. .then(...)并且then可以链式调用,比如拿到数据后渲染到页面,以及其他的操作
  48. .catch(...) 403错误返回的请求数据
  49. */
  50. function getUser2(btn) {
  51. //当无get请求参数时,返回全部数组用户,用表格显示(已经封装到了function.js当中)
  52. //有get时,根据functin.js当中的返回数据,返回指定id,单调数据,具体请看function.js中代码
  53. let url = "http://website.io/users.php";
  54. fetch(url)
  55. .then(response => response.json()) //请求成功返回的json单条或数组的内容
  56. .then(json => {
  57. console.log(json);
  58. render(json, btn);
  59. })
  60. .catch(err => console.log("Fetch Error", err));
  61. }
  62. </script>
  63. <!-- //引入function.js -->
  64. <script src="function.js"></script>
  65. </html>

示例截图:
json转js与js转json以及练习了ajax-xhr/fetch异步通讯以及模块常识,其中Promise状态及Promise中的Fetch API部分暂时还没进行示例学习操作
json转js与js转json以及练习了ajax-xhr/fetch异步通讯以及模块常识,其中Promise状态及Promise中的Fetch API部分暂时还没进行示例学习操作

下面是老师的配置文件(如需测试,自行拿取)

跨域请求端口:

  1. <?php
  2. // 允许跨域请求
  3. header('access-control-allow-origin: *');
  4. // 用户数据
  5. $users = require 'data.php';
  6. // 如果没有get参数,就返回全部用户数据
  7. if (!isset($_GET['id'])) {
  8. echo json_encode($users);
  9. die();
  10. }
  11. // 如果有get参数,如 id=1,则返回指定的一个用户信息
  12. $id = $_GET['id'] ?? false;
  13. if (in_array($id, array_column($users, 'id'))) {
  14. foreach ($users as $user) {
  15. if ($user['id'] == $id) {
  16. // 密码不需要返回,过滤掉
  17. array_pop($user);
  18. echo json_encode($user);
  19. }
  20. }
  21. } else {
  22. echo json_encode('没有该用户');
  23. }

数据存放接口:

  1. <?php
  2. return [
  3. ["id" => 1, 'name' => '猪老师', 'email' => 'zhu@php.cn', 'password' => md5('123')],
  4. ["id" => 2, 'name' => '灭绝', 'email' => 'mj@php.cn', 'password' => md5('456')],
  5. ["id" => 3, 'name' => '欧阳', 'email' => 'oy@php.cn', 'password' => md5('789')],
  6. ];

渲染封包接口:

  1. // 渲染用户数据到页面中
  2. function render(data, btn) {
  3. // 1. 如果是数组,则创建表格展示
  4. if (Array.isArray(data)) {
  5. // 创建表格
  6. const table = document.createElement("table");
  7. // 设置表格样式
  8. table.border = 1;
  9. table.cellPadding = 3;
  10. table.cellSpacing = 0;
  11. table.width = 360;
  12. // 设置标题
  13. const caption = table.createCaption();
  14. caption.textContent = "用户信息列表";
  15. caption.style.fontSize = "18px";
  16. caption.style.fontWeight = "bolder";
  17. caption.style.marginBottom = "8px";
  18. // 创建表头
  19. const thead = table.createTHead();
  20. thead.style.backgroundColor = "lightcyan";
  21. thead.innerHTML = "<tr><th>ID</th><th>用户名</th><th>邮箱</th></tr>";
  22. // 创建表格主体
  23. const tbody = table.createTBody();
  24. tbody.align = "center";
  25. // 遍历数组
  26. data.forEach(user => {
  27. let html = `
  28. <tr>
  29. <td>${user.id}</td><td>${user.name}</td><td>${user.email}</td>
  30. </tr>
  31. `;
  32. // 插入到表格中
  33. tbody.insertAdjacentHTML("beforeEnd", html);
  34. });
  35. // 防止重复生成表格,应该判断一下当前按钮的下一个兄弟是否是表格
  36. if (btn.nextSibling.tagName !== "TABLE") {
  37. btn.after(table);
  38. }
  39. }
  40. // 2. 如果是单个对象,则用列表渲染
  41. else {
  42. // 创建列表元素,用于显示用户信息
  43. const ul = document.createElement("ul");
  44. // 使用模板字面量,快速创建用户数据
  45. ul.innerHTML = `
  46. <li>ID : <span class="user">${data.id}</span></li>
  47. <li>用户名 : <span class="user">${data.name}</span></li>
  48. <li>邮箱 : <span class="user">${data.email}</span></li>
  49. `;
  50. // 与上面功能一样,也是为了防止重复创建列表
  51. if (btn.nextSibling.tagName !== "UL") {
  52. btn.after(ul);
  53. // 添加自定义样式,将用户信息高亮显示
  54. document.querySelectorAll("ul li .user").forEach(item => (item.style.color = "red"));
  55. }
  56. }
  57. }

Promise状态及Fetch API在1月10日课件dom3-dom6中,其中dom6是fetch/promise的api操作,类似fetch中的异步

js导入模块操作

模块的概念,模块就是一个js文件,可以内部成员全部私有,通过导出对象来引用
白话就是,本来js文件点进去所有人都能看,你把js文件给私有化了,然后进行了导入js文件里面的一些函数,比如计算,判断,加减乘除乱七八糟的模块,你经常用,但是不想每次都写一个函数,那么就封装在模块里面,导入直接使用
示例模块,命名为m1.js
export控制导出的模块名,放在函数中,例如export { user, hello, email };,支持重命名导出,例如export { user as user1, hello, email };

  1. let user = "猪老师";
  2. function hello(name) {
  3. return "Hello " + name;
  4. }
  5. let email = "498668472@qq.com";
  6. // export { user as user1, hello, email };
  7. export { user, hello, email };

html中的js代码:

  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. <title>模块常识</title>
  8. </head>
  9. <body>
  10. <script type="module">
  11. // type="module": 支持模块系统
  12. // 模块就是一个js文件,内部成员全部私有,通过导出对象来引用
  13. // 1. 导入模块
  14. // import { user as user1, hello, email } from "./m1.js";
  15. import { user, hello, email } from "./m1.js";
  16. // let user = "灭绝";
  17. // console.log(user1);
  18. console.log(user);
  19. console.log(hello(user));
  20. console.log(email);
  21. </script>
  22. </body>
  23. </html>

导出为默认成员:
m2.js代码

  1. let user = "猪老师";
  2. function hello(name) {
  3. return "Hello " + name;
  4. }
  5. let email = "498668472@qq.com";
  6. // hello 默认导出的成员
  7. export { user, hello as default, email };

默认成员在html中的部分:

  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. <title>模块常识</title>
  8. </head>
  9. <body>
  10. <script type="module">
  11. // 1. 导入模块
  12. // 模块中的默认成员, 使用独立变量接收,如import hello
  13. import hello, { user, email } from "./m2.js";
  14. console.log(user);
  15. console.log(hello(user));
  16. console.log(email);
  17. </script>
  18. </body>
  19. </html>

导出默认成员时增加一个命名空间
m3.js代码:

  1. let user = "猪老师";
  2. function hello(name) {
  3. return "Hello " + name;
  4. }
  5. let email = "498668472@qq.com";
  6. const APP = "商城";
  7. // hello 默认导出的成员
  8. export { user, hello, email, APP };

但在html中将改变:
例如:import * as phpcn,使用命名空间后,所有的代码将遵循使用命名空间名phpcn.模块函数名

  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. <title>模块常识</title>
  8. </head>
  9. <body>
  10. <script type="module">
  11. // 1. 导入模块
  12. // import { hello, APP, user, email } from "./m3.js";
  13. // 当导入成员较多时,使用命名空间来简化
  14. // 命名空间,就是一个对象,只不过这个对象是在当前模块/脚本中是唯一的
  15. import * as phpcn from "./m3.js";
  16. console.log(phpcn.user);
  17. console.log(phpcn.hello(phpcn.user));
  18. console.log(phpcn.cnemail);
  19. console.log(phpcn.APP);
  20. </script>
  21. </body>
  22. </html>