From ce86ff22c0c923eb85f05a296b94759f6c1a1dd2 Mon Sep 17 00:00:00 2001
From: unknown <2152890632@qq.com>
Date: Mon, 11 Dec 2023 23:59:41 +0800
Subject: [PATCH] =?UTF-8?q?ajax=E5=A2=9E=E5=88=A0=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...ax\345\242\236\345\210\240\346\224\271.md" | 147 ++++++++++++++++++
 1 file changed, 147 insertions(+)
 create mode 100644 "06 \351\231\210\345\277\227\344\274\237/20231208 Ajax\345\242\236\345\210\240\346\224\271.md"

diff --git "a/06 \351\231\210\345\277\227\344\274\237/20231208 Ajax\345\242\236\345\210\240\346\224\271.md" "b/06 \351\231\210\345\277\227\344\274\237/20231208 Ajax\345\242\236\345\210\240\346\224\271.md"
new file mode 100644
index 0000000..9090819
--- /dev/null
+++ "b/06 \351\231\210\345\277\227\344\274\237/20231208 Ajax\345\242\236\345\210\240\346\224\271.md"	
@@ -0,0 +1,147 @@
+## HTTP 协议
+
+规定了浏览器发送及服务器返回内容的==格式==
+
+**HTTP协议 - 请求报文**：浏览器发送给服务器的内容
+
+组成：请求行、请求头、空行、请求体
+
+**HTTP协议 - 响应报文**：服务器按照 HTTP 协议要求的==格式==，返回给浏览器的==内容==
+
+组成：
+
+- ==响应行（状态行）==：协议、==HTTP 响应状态码==、状态信息
+- ==响应头==：以键值对的格式携带的附加信息，比如：==Content-Type==
+- 空行：分隔响应头，空行之后的是服务器返回的资源
+- ==响应体==：返回的资源
+
+#### Bootstrap
+
+1. 什么是 Bootstrap 弹框？
+
+   不离开当前页面，显示单独内容，供用户操作需求：使用Bootstrap 弹框，先做个简单效果，点击按钮，让弹框出现，点击 show和 hide 让弹框隐藏
+
+2. 如何使用 Bootstrap 弹框呢？
+
+   1. 先引入 bootstrap.css 和 bootstrap.js 到自己网页中
+
+   2. 准备弹框标签，确认结构（可以从 Bootstrap 官方文档的 Modal 里复制基础例子）- 运行到网页后，逐一对应标签和弹框每个部分对应关系
+
+   3. 通过自定义属性，通知弹框的显示和隐藏，语法如下：
+
+      ```html
+      <button data-bs-toggle="modal" data-bs-target="css选择器">
+        显示弹框
+      </button>
+      
+      <button data-bs-dismiss="modal">Close</button>隐藏弹窗
+      ```
+
+      
+
+## 作业
+
+~~~ js
+<script>
+    // js操控弹窗
+    // const modalDom = document.querySelector('.add-modal')
+    // const modal = new bootstrap.Modal(modalDom)
+    // modal.show() 显示 modal.hide() 隐藏
+    const modalDom = document.querySelector('.add-modal')
+    const modal = new bootstrap.Modal(modalDom)
+         
+    const list = document.querySelector('.list');
+    const addForm = document.querySelector('.add-form');
+    const addBtn = document.querySelector('.add-btn');
+    
+    // 渲染
+    function rand() {
+      axios({
+        url:'https://hmajax.itheima.net/api/books',
+        params:{
+          creator:'666'
+        }
+      }).then(res => {
+        const a = res.data.data.map((imte,i) => {
+            return `<tr>
+              <td>${i+1}</td>
+              <td>${imte.bookname}</td>
+              <td>${imte.author}</td>
+              <td>${imte.publisher}</td>
+              <td data-id=${imte.id}>
+                <span class="del">删除</span>
+                <span class="edit">编辑</span>
+              </td>
+            </tr>`;
+        }).join('');
+        list.innerHTML = a;
+      })
+    }
+    rand()
+
+    // 新建
+    addBtn.addEventListener('click',function(){
+      const inputValue = serialize(addForm,{hash:true,empty:true});
+      const {bookname,author,publisher} = inputValue;
+      console.log(bookname,author,publisher);
+      axios({
+        url:'https://hmajax.itheima.net/api/books',
+        method:'post',
+        data:{
+          bookname,
+          author,
+          publisher,
+          creator:'666'
+        }
+      }).then(res => {
+          modal.hide();
+          rand();
+          addForm.reset();
+      })
+    })
+
+    // 删除and修改
+    list.addEventListener('click',function(e){
+      if(e.target.classList.contains('del')){
+        axios({
+          // https://hmajax.itheima.net/api/books/{id} 这个id要换掉
+          url:`https://hmajax.itheima.net/api/books/${e.target.parentNode.dataset.id}`,
+          method:'delete'
+        }).then(res => {
+          rand();
+        })
+      }
+      if(e.target.classList.contains('edit')){
+        const modalDom = document.querySelector('.edit-modal')
+        const modal = new bootstrap.Modal(modalDom)
+        modal.show();
+        axios({
+          url:`https://hmajax.itheima.net/api/books/${e.target.parentNode.dataset.id}`,
+        }).then(res => {
+          for(let key in res.data.data){
+            // 如果需要对象取值的属性名是一个变量，必须要中括号语法
+            document.querySelector(`.edit-modal .${key}`).value = res.data.data[key];
+          }
+          document.querySelector('.edit-btn').addEventListener('click',function(){
+            const inputValue = serialize(document.querySelector('.edit-form'),{hash:true,empty:true});
+            axios({
+              url:`https://hmajax.itheima.net/api/books/${inputValue.id}`,
+              method:'put',
+              data:{
+                ...inputValue,
+                creator:'666'
+              }
+            }).then(res => {
+              rand();
+              modal.hide();
+            })
+          })
+        })
+
+      }
+    })
+      
+
+  </script>
+~~~
+
-- 
Gitee