From 3405fdd21be03086a94b1797db55629468e2d3a4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=94=A1=E7=8E=AE=E9=93=AD?= <2373854303@qq.com>
Date: Mon, 2 Dec 2024 23:51:45 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A41202=E4=BD=9C=E4=B8=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../20241202 XHR\344\270\216AXIOS.md"         | 453 ++++++++++++++++++
 .../html\346\226\207\344\273\266/index.html"  | 206 ++++++++
 .../html\346\226\207\344\273\266/update.html" | 170 +++++++
 3 files changed, 829 insertions(+)
 create mode 100644 "\350\224\241\347\216\256\351\223\255/20241202 XHR\344\270\216AXIOS/20241202 XHR\344\270\216AXIOS.md"
 create mode 100644 "\350\224\241\347\216\256\351\223\255/20241202 XHR\344\270\216AXIOS/html\346\226\207\344\273\266/index.html"
 create mode 100644 "\350\224\241\347\216\256\351\223\255/20241202 XHR\344\270\216AXIOS/html\346\226\207\344\273\266/update.html"
diff --git "a/\350\224\241\347\216\256\351\223\255/20241202 XHR\344\270\216AXIOS/20241202 XHR\344\270\216AXIOS.md" "b/\350\224\241\347\216\256\351\223\255/20241202 XHR\344\270\216AXIOS/20241202 XHR\344\270\216AXIOS.md"
new file mode 100644
index 0000000..6178d87
--- /dev/null
+++ "b/\350\224\241\347\216\256\351\223\255/20241202 XHR\344\270\216AXIOS/20241202 XHR\344\270\216AXIOS.md"	
@@ -0,0 +1,453 @@
+## 课堂笔记
+
+#### **XHR**
+
+```javascript
+// 创建一个 XMLHttpRequest 对象
+const xhr = new XMLHttpRequest();
+
+// 使用
+// GET
+xhr.open('GET', 'https://api.example.com/data', true);
+xhr.onreadystatechange = function() {
+    if (xhr.readyState === 4 && xhr.status === 200) {
+        console.log(xhr.responseText); // 处理响应
+    }
+};
+xhr.send(null);
+
+// POST
+xhr.open('POST', 'https://api.example.com/submit', true);
+xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
+xhr.onreadystatechange = function() {
+    if (xhr.readyState === 4 && xhr.status === 200) {
+        console.log(xhr.responseText);
+    }
+};
+// 假设我们发送的是 JSON 格式的数据
+const data = JSON.stringify({key1: 'value1', key2: 'value2'});
+xhr.send(data);
+```
+
+#### **AXIOS**
+
+```javascript
+// 导入
+<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+
+// 使用
+// GET
+axios.get('https://api.example.com/data')
+  .then(function (response) {
+    // 成功处理
+    console.log(response.data);
+  })
+  .catch(function (error) {
+    // 错误处理
+    console.error(error);
+  });
+
+// POST
+// 发送 JSON 数据
+axios.post('https://api.example.com/submit', {
+    key1: 'value1',
+    key2: 'value2'
+  })
+  .then(function (response) {
+    console.log(response.data);
+  })
+  .catch(function (error) {
+    console.error(error);
+  });
+```
+
+## 课后作业
+
+#### **异步请求响应页面**
+
+**index.html**
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>axios使用</title>
+    <style>
+        .container {
+            display: flex;
+            justify-content: center;
+            /* 水平居中 */
+            align-items: center;
+            /* 垂直居中 */
+        }
+
+        .module {
+            background-color: #f0f0f0;
+            padding: 10px;
+            border: 1px solid #ccc;
+        }
+
+        .module button,
+        .module a {
+            margin: 10px;
+        }
+
+        /* 仅对第一个模块应用右边距 */
+        .module:first-child {
+            margin-right: 200px;
+        }
+
+        .module {
+            width: 500px;
+            background-color: #f0f0f0;
+            padding: 50px;
+            margin: 20px auto;
+            text-align: center;
+            border-radius: 8px;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+        }
+
+        .module h1 {
+            margin-bottom: 20px;
+        }
+
+        .module form {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+
+        .module label {
+            font-weight: bold;
+            margin-top: 10px;
+        }
+
+        .module input {
+            width: 100%;
+            padding: 10px;
+            margin-top: 5px;
+            border: 1px solid #ccc;
+            border-radius: 4px;
+            box-sizing: border-box;
+        }
+
+        .module input[type="submit"] {
+            width: 100%;
+            padding: 10px;
+            background-color: #007BFF;
+            color: white;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            margin-top: 20px;
+        }
+
+        .module input[type="submit"]:hover {
+            background-color: #0056b3;
+        }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+</head>
+
+<body>
+    <div class="container">
+        <div class="module">
+            <h1>查询模块</h1>
+            <div>
+                <ul>
+                    <li>加载中···</li>
+                </ul>
+            </div>
+        </div>
+        <div class="module">
+            <h1>新增模块</h1>
+            <form action="/submit_book" method="POST">
+                <label for="bookname">图书名称:</label><br>
+                <input type="text" id="bookname" name="bookname" required><br>
+
+                <label for="author">作者:</label><br>
+                <input type="text" id="author" name="author" required><br>
+
+                <label for="publisher">出版社:</label><br>
+                <input type="text" id="publisher" name="publisher" required><br>
+
+                <label for="creator">创建者:</label><br>
+                <input type="text" id="creator" name="creator" required value="cai"><br>
+
+                <input type="submit" value="提交">
+            </form>
+        </div>
+    </div>
+
+    <script>
+        // 获取标签
+        const showModule = document.querySelector('.module').firstElementChild.nextElementSibling.firstElementChild;
+        const insertModule = document.querySelectorAll('.module')[1];
+        const form = insertModule.firstElementChild.nextElementSibling;
+
+        showBook('cai')
+
+        // 查询书本
+        function showBook(creator) {
+            const config = {
+                method: 'get',
+                url: `https://hmajax.itheima.net/api/books?creator=${creator}`,
+            };
+            axios(config)
+                .then(function (response) {
+                    // 正常
+                    const books = response.data.data
+
+                    showModule.innerHTML = books.map(function (book) {
+                        return `<li>书名：${book.bookname}，作者：${book.author}，出版社：${book.publisher}<button data-id=${book.id}>删除</button><a href="./update.html?id=${book.id}&creator=${creator}">修改</a></li>`;
+                    }).join('');
+                })
+                .catch(function (error) {
+                    // 报错的
+                    console.log(error);
+                });
+        }
+
+        // 新增书本
+        function insertBook() {
+            const childrens = form.children;
+            const book = {};
+            for (let i = 0; i < childrens.length; i++) {
+                if (childrens[i].name) {
+                    book[childrens[i].name] = childrens[i].value;
+                }
+            }
+
+            // 把书对象给接口
+            const config = {
+                method: 'post',
+                url: 'https://hmajax.itheima.net/api/books',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                data: book
+            };
+
+            axios(config)
+                .then(function (response) {
+                    showBook('cai');
+                })
+                .catch(function (error) {
+                    console.log(error);
+                });
+
+        }
+
+        // 给每个按钮一个点击事件
+        showModule.addEventListener('click', function (e) {
+            if (e.target.dataset.id) {
+                deleteBook(e.target.dataset.id);
+            }
+        })
+
+        form.addEventListener('submit', function (e) {
+            e.preventDefault();
+            insertBook();
+            this.reset();
+        })
+
+        // 删除书本
+        function deleteBook(id) {
+            var config = {
+                method: 'delete',
+                url: 'https://hmajax.itheima.net/api/books/' + id,
+                headers: {}
+            };
+
+            axios(config)
+                .then(function (response) {
+                    showBook('cai');
+                })
+                .catch(function (error) {
+                    console.log(error);
+                });
+        }
+    </script>
+</body>
+
+</html>
+```
+
+**update.html**
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>修改模块</title>
+    <style>
+        .module {
+            width: 500px;
+            background-color: #f0f0f0;
+            padding: 50px;
+            margin: 20px auto;
+            text-align: center;
+            border-radius: 8px;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+        }
+
+        .module h1 {
+            margin-bottom: 20px;
+        }
+
+        .module form {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+
+        .module label {
+            font-weight: bold;
+            margin-top: 10px;
+        }
+
+        .module input {
+            width: 100%;
+            padding: 10px;
+            margin-top: 5px;
+            border: 1px solid #ccc;
+            border-radius: 4px;
+            box-sizing: border-box;
+        }
+
+        .module input[type="submit"] {
+            width: 100%;
+            padding: 10px;
+            background-color: #007BFF;
+            color: white;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            margin-top: 20px;
+        }
+
+        .module input[type="submit"]:hover {
+            background-color: #0056b3;
+        }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+</head>
+
+<body>
+    <div class="module">
+        <h1>修改模块</h1>
+        <form action="/submit_book" method="POST">
+            <label for="bookname">图书名称:</label><br>
+            <input type="text" id="bookname" name="bookname" required><br>
+
+            <label for="author">作者:</label><br>
+            <input type="text" id="author" name="author" required><br>
+
+            <label for="publisher">出版社:</label><br>
+            <input type="text" id="publisher" name="publisher" required><br>
+
+            <label for="creator">创建者:</label><br>
+            <input type="text" id="creator" name="creator" readonly><br>
+
+            <input type="submit" value="修改">
+        </form>
+    </div>
+
+    <script>
+        // 获取标签
+        const form = document.querySelector('.module').firstElementChild.nextElementSibling;
+        // 获取input        
+        const childrens = form.children;
+        const inputs = [];
+        for (let i = 0; i < childrens.length; i++) {
+            if (childrens[i].name) {
+                inputs.push(childrens[i]);
+            }
+        }
+        // 获取 id 和 creator
+        const url = new URLSearchParams(location.search)
+        const id = url.get('id');
+        const creator = url.get('creator');
+
+        showBook();
+
+        // 查询书本
+        function showBook() {
+            const config = {
+                method: 'get',
+                url: `https://hmajax.itheima.net/api/books?creator=${creator}`,
+            };
+            axios(config)
+                .then(function (response) {
+                    // 正常
+                    const books = response.data.data
+                    // 书本对象
+                    let book;
+
+                    for (let i = 0; i < books.length; i++) {
+                        if (books[i].id == id) {
+                            book = books[i];
+                            break;
+                        }
+                    }
+
+                    // 开始给input插入具体的值了
+                    inputs[0].value = book.bookname;
+                    inputs[1].value = book.author;
+                    inputs[2].value = book.publisher;
+                    inputs[3].value = creator;
+                })
+                .catch(function (error) {
+                    // 报错的
+                    console.log(error);
+                });
+        }
+
+
+        // 修改书本
+        function updateBook() {
+            // 书本对象
+            const book = {};
+            for (let i = 0; i < childrens.length; i++) {
+                if (childrens[i].name) {
+                    book[childrens[i].name] = childrens[i].value;
+                }
+            }
+
+            var config = {
+                method: 'put',
+                url: `https://hmajax.itheima.net/api/books/${id}`,
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                data: book
+            };
+
+            axios(config)
+                .then(function (response) {
+                    // 回到上一个页面
+                    location.href = './index.html';
+                })
+                .catch(function (error) {
+                    console.log(error);
+                });
+        }
+
+        form.addEventListener('submit', function (e) {
+            e.preventDefault();
+
+            // 用当前input里面的valu来修改
+            updateBook();
+        })
+    </script>
+</body>
+
+</html>
+```
+
diff --git "a/\350\224\241\347\216\256\351\223\255/20241202 XHR\344\270\216AXIOS/html\346\226\207\344\273\266/index.html" "b/\350\224\241\347\216\256\351\223\255/20241202 XHR\344\270\216AXIOS/html\346\226\207\344\273\266/index.html"
new file mode 100644
index 0000000..29ffcf7
--- /dev/null
+++ "b/\350\224\241\347\216\256\351\223\255/20241202 XHR\344\270\216AXIOS/html\346\226\207\344\273\266/index.html"	
@@ -0,0 +1,206 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>axios使用</title>
+    <style>
+        .container {
+            display: flex;
+            justify-content: center;
+            /* 水平居中 */
+            align-items: center;
+            /* 垂直居中 */
+        }
+
+        .module {
+            background-color: #f0f0f0;
+            padding: 10px;
+            border: 1px solid #ccc;
+        }
+
+        .module button,
+        .module a {
+            margin: 10px;
+        }
+
+        /* 仅对第一个模块应用右边距 */
+        .module:first-child {
+            margin-right: 200px;
+        }
+
+        .module {
+            width: 500px;
+            background-color: #f0f0f0;
+            padding: 50px;
+            margin: 20px auto;
+            text-align: center;
+            border-radius: 8px;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+        }
+
+        .module h1 {
+            margin-bottom: 20px;
+        }
+
+        .module form {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+
+        .module label {
+            font-weight: bold;
+            margin-top: 10px;
+        }
+
+        .module input {
+            width: 100%;
+            padding: 10px;
+            margin-top: 5px;
+            border: 1px solid #ccc;
+            border-radius: 4px;
+            box-sizing: border-box;
+        }
+
+        .module input[type="submit"] {
+            width: 100%;
+            padding: 10px;
+            background-color: #007BFF;
+            color: white;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            margin-top: 20px;
+        }
+
+        .module input[type="submit"]:hover {
+            background-color: #0056b3;
+        }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+</head>
+
+<body>
+    <div class="container">
+        <div class="module">
+            <h1>查询模块</h1>
+            <div>
+                <ul>
+                    <li>加载中···</li>
+                </ul>
+            </div>
+        </div>
+        <div class="module">
+            <h1>新增模块</h1>
+            <form action="/submit_book" method="POST">
+                <label for="bookname">图书名称:</label><br>
+                <input type="text" id="bookname" name="bookname" required><br>
+
+                <label for="author">作者:</label><br>
+                <input type="text" id="author" name="author" required><br>
+
+                <label for="publisher">出版社:</label><br>
+                <input type="text" id="publisher" name="publisher" required><br>
+
+                <label for="creator">创建者:</label><br>
+                <input type="text" id="creator" name="creator" required value="cai"><br>
+
+                <input type="submit" value="提交">
+            </form>
+        </div>
+    </div>
+
+    <script>
+        // 获取标签
+        const showModule = document.querySelector('.module').firstElementChild.nextElementSibling.firstElementChild;
+        const insertModule = document.querySelectorAll('.module')[1];
+        const form = insertModule.firstElementChild.nextElementSibling;
+
+        showBook('cai')
+
+        // 查询书本
+        function showBook(creator) {
+            const config = {
+                method: 'get',
+                url: `https://hmajax.itheima.net/api/books?creator=${creator}`,
+            };
+            axios(config)
+                .then(function (response) {
+                    // 正常
+                    const books = response.data.data
+
+                    showModule.innerHTML = books.map(function (book) {
+                        return `<li>书名：${book.bookname}，作者：${book.author}，出版社：${book.publisher}<button data-id=${book.id}>删除</button><a href="./update.html?id=${book.id}&creator=${creator}">修改</a></li>`;
+                    }).join('');
+                })
+                .catch(function (error) {
+                    // 报错的
+                    console.log(error);
+                });
+        }
+
+        // 新增书本
+        function insertBook() {
+            const childrens = form.children;
+            const book = {};
+            for (let i = 0; i < childrens.length; i++) {
+                if (childrens[i].name) {
+                    book[childrens[i].name] = childrens[i].value;
+                }
+            }
+
+            // 把书对象给接口
+            const config = {
+                method: 'post',
+                url: 'https://hmajax.itheima.net/api/books',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                data: book
+            };
+
+            axios(config)
+                .then(function (response) {
+                    showBook('cai');
+                })
+                .catch(function (error) {
+                    console.log(error);
+                });
+
+        }
+
+        // 给每个按钮一个点击事件
+        showModule.addEventListener('click', function (e) {
+            if (e.target.dataset.id) {
+                deleteBook(e.target.dataset.id);
+            }
+        })
+
+        form.addEventListener('submit', function (e) {
+            e.preventDefault();
+            insertBook();
+            this.reset();
+        })
+
+        // 删除书本
+        function deleteBook(id) {
+            var config = {
+                method: 'delete',
+                url: 'https://hmajax.itheima.net/api/books/' + id,
+                headers: {}
+            };
+
+            axios(config)
+                .then(function (response) {
+                    showBook('cai');
+                })
+                .catch(function (error) {
+                    console.log(error);
+                });
+        }
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\350\224\241\347\216\256\351\223\255/20241202 XHR\344\270\216AXIOS/html\346\226\207\344\273\266/update.html" "b/\350\224\241\347\216\256\351\223\255/20241202 XHR\344\270\216AXIOS/html\346\226\207\344\273\266/update.html"
new file mode 100644
index 0000000..610ce6d
--- /dev/null
+++ "b/\350\224\241\347\216\256\351\223\255/20241202 XHR\344\270\216AXIOS/html\346\226\207\344\273\266/update.html"	
@@ -0,0 +1,170 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>修改模块</title>
+    <style>
+        .module {
+            width: 500px;
+            background-color: #f0f0f0;
+            padding: 50px;
+            margin: 20px auto;
+            text-align: center;
+            border-radius: 8px;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+        }
+
+        .module h1 {
+            margin-bottom: 20px;
+        }
+
+        .module form {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+
+        .module label {
+            font-weight: bold;
+            margin-top: 10px;
+        }
+
+        .module input {
+            width: 100%;
+            padding: 10px;
+            margin-top: 5px;
+            border: 1px solid #ccc;
+            border-radius: 4px;
+            box-sizing: border-box;
+        }
+
+        .module input[type="submit"] {
+            width: 100%;
+            padding: 10px;
+            background-color: #007BFF;
+            color: white;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            margin-top: 20px;
+        }
+
+        .module input[type="submit"]:hover {
+            background-color: #0056b3;
+        }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+</head>
+
+<body>
+    <div class="module">
+        <h1>修改模块</h1>
+        <form action="/submit_book" method="POST">
+            <label for="bookname">图书名称:</label><br>
+            <input type="text" id="bookname" name="bookname" required><br>
+
+            <label for="author">作者:</label><br>
+            <input type="text" id="author" name="author" required><br>
+
+            <label for="publisher">出版社:</label><br>
+            <input type="text" id="publisher" name="publisher" required><br>
+
+            <label for="creator">创建者:</label><br>
+            <input type="text" id="creator" name="creator" readonly><br>
+
+            <input type="submit" value="修改">
+        </form>
+    </div>
+
+    <script>
+        // 获取标签
+        const form = document.querySelector('.module').firstElementChild.nextElementSibling;
+        // 获取input        
+        const childrens = form.children;
+        const inputs = [];
+        for (let i = 0; i < childrens.length; i++) {
+            if (childrens[i].name) {
+                inputs.push(childrens[i]);
+            }
+        }
+        // 获取 id 和 creator
+        const url = new URLSearchParams(location.search)
+        const id = url.get('id');
+        const creator = url.get('creator');
+
+        showBook();
+
+        // 查询书本
+        function showBook() {
+            const config = {
+                method: 'get',
+                url: `https://hmajax.itheima.net/api/books?creator=${creator}`,
+            };
+            axios(config)
+                .then(function (response) {
+                    // 正常
+                    const books = response.data.data
+                    // 书本对象
+                    let book;
+
+                    for (let i = 0; i < books.length; i++) {
+                        if (books[i].id == id) {
+                            book = books[i];
+                            break;
+                        }
+                    }
+
+                    // 开始给input插入具体的值了
+                    inputs[0].value = book.bookname;
+                    inputs[1].value = book.author;
+                    inputs[2].value = book.publisher;
+                    inputs[3].value = creator;
+                })
+                .catch(function (error) {
+                    // 报错的
+                    console.log(error);
+                });
+        }
+
+
+        // 修改书本
+        function updateBook() {
+            // 书本对象
+            const book = {};
+            for (let i = 0; i < childrens.length; i++) {
+                if (childrens[i].name) {
+                    book[childrens[i].name] = childrens[i].value;
+                }
+            }
+
+            var config = {
+                method: 'put',
+                url: `https://hmajax.itheima.net/api/books/${id}`,
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                data: book
+            };
+
+            axios(config)
+                .then(function (response) {
+                    // 回到上一个页面
+                    location.href = './index.html';
+                })
+                .catch(function (error) {
+                    console.log(error);
+                });
+        }
+
+        form.addEventListener('submit', function (e) {
+            e.preventDefault();
+
+            // 用当前input里面的valu来修改
+            updateBook();
+        })
+    </script>
+</body>
+
+</html>
\ No newline at end of file
-- 
Gitee

