收藏
PHPz批改状态：合格
老师批语：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>JSON基础知识</title></head><body></body><script>// JS对象const staff = {id: 1,name: "DASHU",email: "help_10086@foxmail.com",isMarried: "0",gender: "0",bophan: "HR-Dept",congviec: "HR",salary: 20000000,/* toJSON() {// 只返回 name,emailreturn `name:${this.name}, email=${this.email}`;}, */};// console.log(staff);// console.log(typeof staff);// 1、序列化json: JSON.stringifylet jsonStr = JSON.stringify(staff);// 第二个参数: array, callback// arrayjsonStr = JSON.stringify(staff, ["name", "email"]);// callback,做一些操作jsonStr = JSON.stringify(staff, (key, value) => {switch (key) {case "gender":return value === "0" ? "男" : "女";case "salary":return undefined;default:return value;}});// 第三个参数: 格式化jsonStr = JSON.stringify(staff, null, 2);jsonStr = JSON.stringify(staff, null, "**");console.log(jsonStr);// console.log(typeof jsonStr);// JSON字符串// verify: https://www.bejson.com/// 1. 所有属性必须使用双引号// 2. 字符类型的值必须使用双引号// 3. 不能有undefined// 4. 最后一个值后不能有逗号const siteInfo = `{"name":"PHP中文网","domain":"https://www.php.cn","isRecord":true,"email":"498668472@qq.com","address":"合肥市政务新区蔚蓝商务港","category":["视频","文章","资源"],"lesson": {"name": "第18期Web全栈线上培训班","price": 4800,"content": ["JavaScript", "PHP", "ThinkPHP"]}}`;</script></html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>JSON基础知识</title></head><body></body><script>// JSON字符串// verify: https://www.bejson.com/// 1. 所有属性必须使用双引号// 2. 字符类型的值必须使用双引号// 3. 不能有undefined// 4. 最后一个值后不能有逗号const siteInfo = `{"name":"PHP中文网","domain":"https://www.php.cn","isRecord":true,"email":"498668472@qq.com","address":"合肥市政务新区蔚蓝商务港","category":["视频","文章","资源"],"lesson": {"name": "第18期Web全栈线上培训班","price": 4800,"content": ["JavaScript", "PHP", "ThinkPHP"]}}`;// 2、jsonStr -> jsObj: json字符串[后端] -> js对象[前端]// JSON.parse// 以前用evallet site = eval("(" + siteInfo + ")");console.log(site, typeof site);site = JSON.parse(siteInfo);site = JSON.parse(siteInfo, function (key, value) {// console.log(key, "=>", value);if (key === "email" || key === "address") {delete this[key];} else {return value;}});console.log(site);// js obj 渲染到页面中let html = `<li>网站名称: ${site.name}</li><li>网站域名: ${site.domain.slice(8)}</li><li>是否备案: ${site.isRecord ? "已备案" : "未备案"}</li><li>服务内容:<ul><li style="color:red">1. arry.map()</li>${site.category.map((cate) => `<li>${cate}</li>`).join("")}<li style="color:red">2. arry.reduce()</li>${site.category.reduce((acc, cur) => `${acc}</li><li>${cur}`, "")}</ul></li><li>课程信息:<ul><li style="color:red"> 1: 根据键名获取值</li>${Object.keys(site.lesson).map((key) => `<li>${site.lesson[key]}</li>`).join("")}<li style="color: red"> 2: 直接获取值</li>${Object.values(site.lesson).map((less) => `<li>${less}</li>`).join("")}</ul></li>`;const ul = document.createElement("ul");ul.innerHTML = html;document.body.append(ul);</script></html>
[http://help10086.cn/0110/demo1.html]
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><script src="funcShow.js"></script><title>ajax-xhr</title></head><body style="display: grid; gap: 1em"><button style="width:166px;" onclick="getStaff1(this)">获取员工信息 - XHR</button><script>// 1. 传统 XHR,是一个对象/*** 1. 创建对象: new XMLHttpRequest();* 2. 响应类型: xhr.responseType = "json";* 3. 配置参数: xhr.open("GET", url, true);* 4. 请求回调: xhr.onload = () => console.log(xhr.response);* 5. 失败回调: xhr.onerror = () => console.log("Error");* 6. 发起请求: xhr.send(null);** xhr 至少监听2个事件: load,error, 调用2个函数: open,send* post请求,需要设置一下请求头与请求的数据,其它与get请求完全相同*/function getStaff1(btn) {// 1. 创建对象:const xhr = new XMLHttpRequest();// 2. 响应类型:xhr.responseType = "json";// 3. 配置参数:let url = "http://help10086.cn/0110/staffs.php";// url = "http://help10086.cn/0110/staffs.php?msnv=900101";xhr.open("GET", url, true);// 4. 请求回调:xhr.onload = () => {console.log(xhr.response);// 渲染到页面中render(xhr.response, btn);};// 5. 失败回调:xhr.onerror = () => console.log("Error");// 6. 发起请求:xhr.send(null);}</script></body></html>
[http://help10086.cn/0110/demo2.html]
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><script src="funcShow.js"></script><title>Fetch API</title></head><body><button onclick="getStaff(this)">获取用户信息 - Fetch</button><script>// 实际开发中, 通常不会直接去用Promise,用fetch// axios : 基于 xhr// fetch : 基于 promise, 返回一个Promise对象// console.log(fetch());/* fetch("https://jsonplaceholder.typicode.com/users").then(response => response.json()).then(json => console.log(json)); */fetch("http://help10086.cn/0110/staffs.php").then((response) => response.json()).then((json) => console.log(json));// 同域: 协议相同, 域名相同,端口相同,否则就是跨域请求// ECMA2017, async, await, 来简化了fetch , 实现同步的方式来编写异步代码// 异步函数,内部有异步操作async function getStaff(btn) {let url = "http://help10086.cn/0110/staffs.php";// url = "http://help10086.cn/0110/staffs.php?msnv=900101";//await: 表示后面是一个异步请求,需要等待结果const response = await fetch(url);// response响应对象,json():将返回的数据转为jsonconst result = await response.json();console.log(result);// 渲染到页面中render(result, btn);}</script></body></html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
