From 192fb8c7aff17d00a514a8231a2eb08ae2304a96 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E6=99=BA=E7=BF=94?= <2045602860@qq.com>
Date: Mon, 11 Dec 2023 13:05:35 +0000
Subject: [PATCH] =?UTF-8?q?34=20=E5=88=98=E6=99=BA=E7=BF=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: 刘智翔 <2045602860@qq.com>
---
 ...ax\345\233\276\344\271\246\351\246\206.md" | 112 ++++++++++++++++++
 1 file changed, 112 insertions(+)
 create mode 100644 "34 \345\210\230\346\231\272\347\277\224/Ajax\345\233\276\344\271\246\351\246\206.md"

diff --git "a/34 \345\210\230\346\231\272\347\277\224/Ajax\345\233\276\344\271\246\351\246\206.md" "b/34 \345\210\230\346\231\272\347\277\224/Ajax\345\233\276\344\271\246\351\246\206.md"
new file mode 100644
index 0000000..8f752e8
--- /dev/null
+++ "b/34 \345\210\230\346\231\272\347\277\224/Ajax\345\233\276\344\271\246\351\246\206.md"	
@@ -0,0 +1,112 @@
+# 笔记
+
+```js
+// bootstrap对象
+const modal = new bootstrap.Modal(元素)
+// 显示的方法
+modal.show()
+// 关闭的方法
+modal.hide()
+
+confirm('提示框文案') // 弹出提示窗判断是否执行操作，返回true/false
+```
+
+
+
+# 作业
+
+```js
+const list = document.querySelector('.list')
+const author = 'kjinkjin'
+show()
+
+
+document.querySelector('.add-btn').addEventListener('click', e => {
+    const addform = document.querySelector('.add-form')
+    const { bookname, author, publisher } = serialize(addform, true, true)
+    axios({
+        url: 'http://ajax-api.itheima.net/api/books',
+        method: 'post',
+        author,
+        data: { bookname, author, publisher }
+    })
+    show()
+})
+
+
+list.addEventListener('click', e => {
+    const tar = e.target
+    const id = tar.parentNode.dataset.id
+    if (tar.className == 'del') {
+        axios({
+            url: `http://ajax-api.itheima.net/api/books/${id}`,
+            method: 'delete'
+        }).then(e => {
+            show()
+        })
+    }
+    
+    
+    if (tar.className == 'edit') {
+        const edit = document.querySelector('.edit-modal')
+        const editmodal = new bootstrap.Modal(edit)
+        axios({
+            url: `http://ajax-api.itheima.net/api/books/${id}`
+        }).then(e => {
+            const data = e.data.data
+            const editform = document.querySelector('.edit-form')
+            const { bookname, author, publisher } = editform
+            bookname.value = data.bookname
+            author.value = data.author
+            publisher.value = data.publisher
+            editmodal.show()
+            document.querySelector('.edit-btn').addEventListener('click', e => { 
+                const {bookname, author, publisher } = serialize(editform,true,true)
+                axios({
+                    url: `http://ajax-api.itheima.net/api/books/${id}`,
+                    method: 'put',
+                    data:{
+                        bookname,
+                        author,
+                        publisher
+                    }
+                }).then(e => {
+                    show()
+                    editmodal.hide()
+                    console.log(e);
+                })
+            })
+
+        })
+    }
+})
+
+
+
+
+
+
+function show() {
+    const lost = document.querySelector('.list')
+    let str = ''
+    axios({
+        url: 'http://ajax-api.itheima.net/api/books'
+    }).then((e, i) => {
+        e.data.data.forEach((e, i) => {
+            str += `<tr>
+    <td>${i + 1}</td>
+    <td>${e.bookname}</td>
+    <td>${e.author}</td>
+    <td>${e.publisher}</td>
+    <td data-id=${e.id}>
+      <span class="del">删除</span>
+      <span class="edit">编辑</span>
+    </td>
+  </tr>`
+        });
+        list.innerHTML = str
+    })
+}
+
+
+```
\ No newline at end of file
-- 
Gitee