first commit

2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
--- a/历届学生/18课程/class18/课程/2020-10-26/ajax.js
+++ b/历届学生/18课程/class18/课程/2020-10-26/ajax.js
@@ -0,0 +1,52 @@
+function ajax(params) {
+
+    // 拿出电话（创建一个新的ajax对象）
+    var ajax = new XMLHttpRequest();
+
+    // 如果是GET请求特殊处理一下参数
+    if (params.methods == "GET") {
+        var par = ""
+        for (const key in params.data) {
+            par += `&${key}=${params.data[key]}`
+        }
+        params.url = params.url + "?" + par.substr(1)
+        console.log(params.url);
+    }
+
+    // 设置电话号码
+    // 是否异步
+    ajax.open(params.methods, params.url, params.async)
+
+    // 如果是post请求，那么设置一下post请求的参数用何种数据格式给后端
+    // json格式
+    if (params.methods == "POST") {
+        ajax.setRequestHeader('Content-Type', 'application/json;charset=utf-8')
+    }
+
+    // 拨号
+    if (params.methods == "POST") {
+        ajax.send(JSON.stringify(params.data));
+    } else {
+        ajax.send()
+    }
+
+
+
+    // 监听网络状态，只有网络请求成功的时候才渲染页面，否则显示错误信息
+    ajax.onreadystatechange = function() {
+        if (ajax.readyState == 4) {
+            if (ajax.status == 200) {
+                var data = JSON.parse(ajax.responseText);
+                if (data.status == 200) {
+                    params.success(data.data)
+                } else {
+                    params.error(data.msg)
+                }
+            } else {
+                params.error("数据请求失败，稍后再试")
+            }
+        }
+    }
+
+
+}
--- a/历届学生/18课程/class18/课程/2020-10-26/index.html
+++ b/历届学生/18课程/class18/课程/2020-10-26/index.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ajax案例</title>
+    <script src="./ajax.js"></script>
+</head>
+
+<body>
+
+    <ul>
+        <li>
+            <a href=""></a>
+        </li>
+    </ul>
+
+</body>
+
+<script>
+    // 系统级错误
+    // 应用级错误
+    function GetHomeData() {
+        ajax({
+            url: 'http://192.168.0.109:3000/api/json/index',
+            data: {},
+            methods: 'GET',
+            async: true,
+            success: function (res) {
+                console.log(res);
+                Newest(res.newest)
+            },
+            error: function (err) {
+                console.log(err);
+            }
+        })
+    }
+
+    function Newest(data) {
+        var ul = document.querySelector("ul")
+        data.list.forEach((v,i) => {
+            ul.innerHTML += `
+                <li>
+                    <a href="./info.html?id=${v.id}">
+                        <img src="${v.preview}"/>
+                        <p>${v.title}</p>
+                    </a>
+                </li>
+            `
+        });
+    }
+
+
+    GetHomeData()
+</script>
+
+</html>
--- a/历届学生/18课程/class18/课程/2020-10-26/info.html
+++ b/历届学生/18课程/class18/课程/2020-10-26/info.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>详情</title>
+    <script src="./ajax.js"></script>
+</head>
+
+<body>
+
+    <div class="main">
+
+    </div>
+</body>
+
+<script>
+    var page = 3,
+        id = location.search.split("id=")[1],
+        total_page = "";
+
+    function GetInfoData() {
+        ajax({
+            url: 'http://192.168.0.109:3000/api/json/info',
+            data: {
+                id: id,
+                page: page
+            },
+            methods: 'GET',
+            async: true,
+            success: function (res) {
+                total_page = res.total_page
+                RenderInfo(res.list)
+            },
+            error: function (err) {
+                console.log(err);
+            }
+        })
+    }
+
+    function RenderInfo(data) {
+        data.forEach(v => {
+            document.querySelector(".main").innerHTML += `
+                <img src="${v.src}" alt="">
+            `
+        });
+    }
+
+
+    document.querySelector("body").onscroll = function () {
+        let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+        let clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
+        let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
+
+        //避免没有数据的时候 重复执行 scrollHeight > clientHeight
+        if (scrollHeight > clientHeight && scrollTop + clientHeight === scrollHeight) {
+            console.log("滚动到底部");
+            page += 1;
+            if (page > total_page) {
+                alert("没有数据了...")
+            } else {
+                GetInfoData()
+            }
+        }
+    }
+
+    GetInfoData()
+</script>
+
+</html>