Главная Обзор Помощь
Вход
lovecoding
/
W250913
10
0
Ответвить 0
Файлы Задачи 0 Запросы на слияние 0 Вики
Просмотр исходного кода

admin

fengchuanyu 2 часов назад
Родитель
bc2b35ced2
Сommit
b1fb8af722
9 измененных файлов с 213 добавлено и 1 удалено
Разделённый вид Показать статистику Diff
  1. 6 1
      8_ES6/24_ajax.html
  2. 27 0
      8_ES6/25_JSON.html
  3. 62 0
      8_ES6/26_封装ajax.html
  4. 3 0
      8_ES6/data/a.json
  5. 3 0
      8_ES6/data/b.json
  6. 3 0
      8_ES6/data/c.json
  7. 38 0
      8_ES6/data/data1.json
  8. 38 0
      8_ES6/data/data2.json
  9. 33 0
      8_ES6/js/ajax.js

+ 6 - 1
8_ES6/24_ajax.html
Просмотреть файл 

@@ -26,7 +26,12 @@
 
                 // 状态码 200 表示请求成功
 
                 if(xhr.status == 200){
 
                     // 响应体
 
-                    console.log(xhr.responseText);
 
+                    // console.log(xhr.responseText);
 
+                    // 解析JSON字符串 转换为对象 调用JSON.parse方法
 
+                    let jsonObj = JSON.parse(xhr.responseText);
 
+                    console.log(jsonObj);
 
+                    // 访问对象属性
 
+                    console.log(jsonObj[0].url);
 
                 }
 
             }
 
         }

+ 27 - 0
8_ES6/25_JSON.html
Просмотреть файл 

@@ -0,0 +1,27 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <script>
 
+        // JSON 字符串 是一种轻量级的数据交换格式 字符串中放置了一个对象
 
+        // 因为在前端后端数据交互中 通常使用JSON字符串来传递数据 http请求中只能使用字符串
 
+        // let jsonStr = '{"name":"张三","age":18}';
 
+        // console.log(jsonStr);
 
+        // 解析JSON字符串 转换为对象 调用JSON.parse方法
 
+        // let jsonObj = JSON.parse(jsonStr);
 
+        // console.log(jsonObj);
 
+
 
+        let obj = {
 
+            name:"张三",
 
+            age:18
 
+        }
 
+        // 将对象转换为JSON字符串 调用JSON.stringify方法
 
+        let jsonStr = JSON.stringify(obj);
 
+        console.log(jsonStr);
 
+    </script>
 
+</body>
 
+</html>

+ 62 - 0
8_ES6/26_封装ajax.html
Просмотреть файл 

@@ -0,0 +1,62 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+
 
+<body>
 
+    <script src="./js/ajax.js"></script>
 
+    <script>
 
+        // function ajax(method,url,callback) {
 
+        //     // ajax 异步请求
 
+        //     // 第一步 实例化一个XMLHttpRequest对象
 
+        //     let xhr = new XMLHttpRequest();
 
+        //     // 第二步 调用open方法 配置请求参数
 
+        //     // open方法参数说明
 
+        //     // 第一个参数：请求方法 GET/POST
 
+        //     // 第二个参数：请求地址
 
+        //     // 第三个参数：是否异步 true/false
 
+        //     xhr.open(method, url, true);
 
+        //     // 第三步 调用send方法 发送请求
 
+        //     xhr.send();
 
+        //     // 第四步 监听状态变化
 
+        //     xhr.onreadystatechange = function () {
 
+        //         // 状态码 0 1 2 3 4
 
+        //         // 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪
 
+        //         if (xhr.readyState == 4) {
 
+        //             // 状态码 200 表示请求成功
 
+        //             if (xhr.status == 200) {
 
+        //                 // 响应体
 
+        //                 // console.log(xhr.responseText);
 
+        //                 // 解析JSON字符串 转换为对象 调用JSON.parse方法
 
+        //                 let jsonObj = JSON.parse(xhr.responseText);
 
+        //                 // console.log(jsonObj);
 
+        //                 // 访问对象属性
 
+        //                 // console.log(jsonObj[0].url);
 
+
 
+        //                 // 成功之后执行传递过来的回调函数
 
+        //                 callback(jsonObj);
 
+        //             }
 
+        //         }
 
+        //     }
 
+        // }
 
+
 
+        // setTimeout 中第一个参数为回调函数 （成功之后再回来调用的函数）
 
+        // 一般异步处理中都会使用回调函数
 
+        // setTimeout(function(){
 
+
 
+        // },1000)
 
+
 
+        // ajax("GET","https://api.thecatapi.com/v1/images/searcha",function(res){
 
+        //     console.log(res);
 
+        // });
 
+        ajax("GET","./data/data1.json",function(res){
 
+            console.log(res);
 
+        });
 
+    </script>
 
+</body>
 
+
 
+</html>

+ 3 - 0
8_ES6/data/a.json
Просмотреть файл 

@@ -0,0 +1,3 @@
 
+{
 
+  "name":"a"
 
+}

+ 3 - 0
8_ES6/data/b.json
Просмотреть файл 

@@ -0,0 +1,3 @@
 
+{
 
+  "name":"b"
 
+}

+ 3 - 0
8_ES6/data/c.json
Просмотреть файл 

@@ -0,0 +1,3 @@
 
+{
 
+  "name":"c"
 
+}

+ 38 - 0
8_ES6/data/data1.json
Просмотреть файл 

@@ -0,0 +1,38 @@
 
+{
 
+    "code": 101,
 
+    "message": "展示职位成功",
 
+    "data": [
 
+        {
 
+            "jrid": 59,
 
+            "levelname": "支行副行长"
 
+        },
 
+        {
 
+            "jrid": 60,
 
+            "levelname": "业务主管"
 
+        },
 
+        {
 
+            "jrid": 61,
 
+            "levelname": "业务副主管"
 
+        },
 
+        {
 
+            "jrid": 62,
 
+            "levelname": "高级柜员"
 
+        },
 
+        {
 
+            "jrid": 63,
 
+            "levelname": "中级柜员"
 
+        },
 
+        {
 
+            "jrid": 64,
 
+            "levelname": "普通柜员"
 
+        },
 
+        {
 
+            "jrid": 65,
 
+            "levelname": "实习生"
 
+        },
 
+        {
 
+            "jrid": 78,
 
+            "levelname": "水质监测员"
 
+        }
 
+    ]
 
+}

+ 38 - 0
8_ES6/data/data2.json
Просмотреть файл 

@@ -0,0 +1,38 @@
 
+{
 
+    "code": 101,
 
+    "message": "展示姓名成功",
 
+    "data": [
 
+        {
 
+            "jrid": 59,
 
+            "userName":"小张"
 
+        },
 
+        {
 
+            "jrid": 60,
 
+            "userName":"小李"
 
+        },
 
+        {
 
+            "jrid": 61,
 
+            "userName":"小王"
 
+        },
 
+        {
 
+            "jrid": 62,
 
+            "userName":"小赵"
 
+        },
 
+        {
 
+            "jrid": 63,
 
+            "userName":"小孙"
 
+        },
 
+        {
 
+            "jrid": 64,
 
+            "userName":"小周"
 
+        },
 
+        {
 
+            "jrid": 65,
 
+            "userName":"小陈"
 
+        },
 
+        {
 
+            "jrid": 78,
 
+            "userName":"小魏"
 
+        }
 
+    ]
 
+}

+ 33 - 0
8_ES6/js/ajax.js
Просмотреть файл 

@@ -0,0 +1,33 @@
 
+function ajax(method, url, callback) {
 
+    // ajax 异步请求
 
+    // 第一步 实例化一个XMLHttpRequest对象
 
+    let xhr = new XMLHttpRequest();
 
+    // 第二步 调用open方法 配置请求参数
 
+    // open方法参数说明
 
+    // 第一个参数：请求方法 GET/POST
 
+    // 第二个参数：请求地址
 
+    // 第三个参数：是否异步 true/false
 
+    xhr.open(method, url, true);
 
+    // 第三步 调用send方法 发送请求
 
+    xhr.send();
 
+    // 第四步 监听状态变化
 
+    xhr.onreadystatechange = function () {
 
+        // 状态码 0 1 2 3 4
 
+        // 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪
 
+        if (xhr.readyState == 4) {
 
+            // 状态码 200 表示请求成功
 
+            if (xhr.status == 200) {
 
+                // 响应体
 
+                // console.log(xhr.responseText);
 
+                // 解析JSON字符串 转换为对象 调用JSON.parse方法
 
+                let jsonObj = JSON.parse(xhr.responseText);
 
+                // console.log(jsonObj);
 
+                // 访问对象属性
 
+                // console.log(jsonObj[0].url);
 
+
 
+                // 成功之后执行传递过来的回调函数
 
+                callback(jsonObj);
 
+            }
 
+        }
 
+    }
 
+}