筆記目錄

2. Ajax 綜合案例
- 2.1 案例一-圖書管理
- - 2.1.1 渲染列表
  - 2.1.2 新增圖書
  - 2.1.3 刪除圖書
  - 2.1.4 編輯圖書
- 2.2 案例二-背景圖的上傳和更換
- - 2.2.1 上傳
  - 2.2.2 更換
- 2.3 案例三-個人信息設置
- - 2.3.1 信息渲染
  - 2.3.2 頭像修改
  - 2.2.3 信息修改
  - 2.3.4 提示框

Ajax 筆記：

Ajax 筆記（一）—— Ajax 入門

Ajax 筆記（二）—— Ajax 案例

Ajax 筆記（三）—— Ajax 原理

Ajax 筆記（四）—— Ajax 進階

Ajax 筆記接口文檔：https://apifox.com/apidoc/shared-fa9274ac-362e-4905-806b-6135df6aa90e/doc-842135

2. Ajax 綜合案例

2.1 案例一-圖書管理

2.1.1 渲染列表

獲取數據的時候，需要給自己起一個外號。由于都是上傳到同一服務器，為了區分不同同學的數據。

/*** 目標1：渲染圖書列表*  1.1 獲取數據*  1.2 渲染數據*/
const creator = '老張'
// 封裝-獲取并渲染圖書列表函數
function getBooksList() {// 1.1 獲取數據axios({url: 'http://hmajax.itheima.net/api/books',params: {// 外號：獲取對應數據creator}}).then(result => {// console.log(result)const bookList = result.data.data// console.log(bookList)// 1.2 渲染數據const htmlStr = bookList.map((item, index) => {return `<tr><td>${index + 1}</td><td>${item.bookname}</td><td>${item.author}</td><td>${item.publisher}</td><td data-id=${item.id}><span class="del">刪除</span><span class="edit">編輯</span></td></tr>`}).join('')// console.log(htmlStr)document.querySelector('.list').innerHTML = htmlStr})
}
// 網頁加載運行，獲取并渲染列表一次
getBooksList()

在這里插入圖片描述

2.1.2 新增圖書

/*** 目標2：新增圖書*  2.1 新增彈框->顯示和隱藏*  2.2 收集表單數據，并提交到服務器保存*  2.3 刷新圖書列表*/
// 2.1 創建彈框對象
const addModalDom = document.querySelector('.add-modal')
const addModal = new bootstrap.Modal(addModalDom)
// 保存按鈕->點擊->隱藏彈框
document.querySelector('.add-btn').addEventListener('click', () => {// 2.2 收集表單數據，并提交到服務器保存const addForm = document.querySelector('.add-form')const bookObj = serialize(addForm, { hash: true, empty: true })// console.log(bookObj)// 提交到服務器axios({url: 'http://hmajax.itheima.net/api/books',method: 'POST',data: {...bookObj,creator}}).then(result => {// console.log(result)// 2.3 添加成功后，重新請求并渲染圖書列表getBooksList()// 重置表單addForm.reset()// 隱藏彈框addModal.hide()})
})

在這里插入圖片描述

2.1.3 刪除圖書

/*** 目標3：刪除圖書*  3.1 刪除元素綁定點擊事件->獲取圖書id*  3.2 調用刪除接口*  3.3 刷新圖書列表*/
// 3.1 刪除元素->點擊（事件委托）
document.querySelector('.list').addEventListener('click', e => {// 獲取觸發事件目標元素// console.log(e.target)// 判斷點擊的是刪除元素if (e.target.classList.contains('del')) {// console.log('點擊刪除元素')// 獲取圖書id（自定義屬性id）const theId = e.target.parentNode.dataset.id// console.log(theId)// 3.2 調用刪除接口axios({url: `http://hmajax.itheima.net/api/books/${theId}`,method: 'DELETE'}).then(() => {// 3.3 刷新圖書列表getBooksList()})}
})

2.1.4 編輯圖書

/*** 目標4：編輯圖書*  4.1 編輯彈框->顯示和隱藏*  4.2 獲取當前編輯圖書數據->回顯到編輯表單中*  4.3 提交保存修改，并刷新列表*/
// 4.1 編輯彈框->顯示和隱藏
const editDom = document.querySelector('.edit-modal')
const editModal = new bootstrap.Modal(editDom)
// 編輯和刪除都是動態創建的元素，需要將事件委托給`.list`
// 編輯元素->點擊->彈框顯示
document.querySelector('.list').addEventListener('click', e => {// 判斷點擊的是否為編輯元素if (e.target.classList.contains('edit')) {// 4.2 獲取當前編輯圖書數據->回顯到編輯表單中const theId = e.target.parentNode.dataset.idaxios({url: `http://hmajax.itheima.net/api/books/${theId}`}).then(result => {const bookObj = result.data.data// document.querySelector('.edit-form .bookname').value = bookObj.bookname// document.querySelector('.edit-form .author').value = bookObj.author// 數據對象“屬性”和標簽“類名”一致// 遍歷數據對象，使用屬性去獲取對應的標簽，快速賦值const keys = Object.keys(bookObj) // ['id', 'bookname', 'author', 'publisher']keys.forEach(key => {document.querySelector(`.edit-form .${key}`).value = bookObj[key]})})editModal.show()}
})
// 修改按鈕->點擊->隱藏彈框
document.querySelector('.edit-btn').addEventListener('click', () => {// 4.3 提交保存修改，并刷新列表const editForm = document.querySelector('.edit-form')const { id, bookname, author, publisher } = serialize(editForm, { hash: true, empty: true})// 保存正在編輯的圖書id，隱藏起來：無需讓用戶修改// <input type="hidden" class="id" name="id" value="84783">axios({url: `http://hmajax.itheima.net/api/books/${id}`,method: 'PUT',data: {bookname,author,publisher,creator}}).then(() => {// 修改成功以后，重新獲取并刷新列表getBooksList()// 隱藏彈框editModal.hide()})
})

在這里插入圖片描述

2.2 案例二-背景圖的上傳和更換

2.2.1 上傳

先選擇的本地文件，接著提交到服務器保存，服務器會返回圖片的 url 網址，然后把網址加載到 img 標簽的 src 屬性中即可顯示。避免了瀏覽器保存是臨時性的問題。

圖片是文件，而不是以前的數字和字符串。所以傳遞文件一般需要放入 FormData 以鍵值對-文件流的數據傳遞

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>圖片上傳</title>
</head><body><!-- 文件選擇元素 --><input type="file" class="upload"><img src="" alt="" class="my-img"><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>/*** 目標：圖片上傳，顯示到網頁上*  1. 獲取圖片文件*  2. 使用 FormData 攜帶圖片文件*  3. 提交到服務器，獲取圖片url網址使用*/// 文件選擇元素->change改變事件document.querySelector('.upload').addEventListener('change', e => {// 1. 獲取圖片文件console.log(e.target.files[0])// 2. 使用 FormData 攜帶圖片文件const fd = new FormData()fd.append('img', e.target.files[0])// 3. 提交到服務器，獲取圖片url網址使用axios({url: 'http://hmajax.itheima.net/api/uploadimg',method: 'POST',data: fd}).then(result => {console.log(result)// 取出圖片url網址，用img標簽加載顯示const imgUrl = result.data.data.urldocument.querySelector('.my-img').src = imgUrl})})</script>
</body></html>

2.2.2 更換

/*** 目標：網站-更換背景*  1. 選擇圖片上傳，設置body背景*  2. 上傳成功時，"保存"圖片url網址*  3. 網頁運行后，"獲取"url網址使用* */
document.querySelector('.bg-ipt').addEventListener('change', e => {// 1. 選擇圖片上傳，設置body背景console.log(e.target.files[0])const fd = new FormData()fd.append('img', e.target.files[0])axios({url: 'http://hmajax.itheima.net/api/uploadimg',method: 'POST',data: fd}).then(result => {const imgUrl = result.data.data.urldocument.body.style.backgroundImage = `url(${imgUrl})`// 2. 上傳成功時，"保存"圖片url網址localStorage.setItem('bgImg', imgUrl)})
})// 3. 網頁運行后，"獲取"url網址使用
const bgUrl = localStorage.getItem('bgImg')
console.log(bgUrl)
bgUrl && (document.body.style.backgroundImage = `url(${bgUrl})`)

2.3 案例三-個人信息設置

2.3.1 信息渲染

/*** 目標1：信息渲染*  1.1 獲取用戶的數據*  1.2 回顯數據到標簽上* */
const creator = '播仔'
// 1.1 獲取用戶的數據
axios({url: 'http://hmajax.itheima.net/api/settings',params: {creator}
}).then(result => {const userObj = result.data.data// 1.2 回顯數據到標簽上Object.keys(userObj).forEach(key => {if (key === 'avatar') {// 賦予默認頭像document.querySelector('.prew').src = userObj[key]} else if (key === 'gender') {// 賦予默認性別// 獲取性別單選框：[男radio元素，女radio元素]const gRadioList = document.querySelectorAll('.gender')// 獲取性別數字：0男，1女const gNum = userObj[key]// 通過性別數字，作為下標，碰巧對應性別單選框元素的下標，設置選中狀態gRadioList[gNum].checked = true} else {// 賦予默認內容document.querySelector(`.${key}`).value = userObj[key]}})
})

在這里插入圖片描述

2.3.2 頭像修改

/*** 目標2：修改頭像*  2.1 獲取頭像文件*  2.2 提交服務器并更新頭像* */
// 文件選擇元素->change事件
document.querySelector('.upload').addEventListener('change', e => {// 2.1 獲取頭像文件console.log(e.target.files[0])const fd = new FormData()fd.append('avatar', e.target.files[0])fd.append('creator', creator)// 2.2 提交服務器并更新頭像axios({url: 'http://hmajax.itheima.net/api/avatar',method: 'PUT',data: fd}).then(result => {const imgUrl = result.data.data.avatar// 把新的頭像回顯到頁面上document.querySelector('.prew').src = imgUrl})
})

2.2.3 信息修改

/*** 目標3：提交表單*  3.1 收集表單信息*  3.2 提交到服務器保存*/
// 保存修改->點擊
document.querySelector('.submit').addEventListener('click', () => {// 3.1 收集表單信息const userForm = document.querySelector('.user-form')const userObj = serialize(userForm, { hash: true, empty: true })userObj.creator = creator// 性別數字字符串，轉成數字類型userObj.gender = +userObj.genderconsole.log(userObj)// 3.2 提交到服務器保存axios({url: 'http://hmajax.itheima.net/api/settings',method: 'PUT',data: userObj}).then(result => {})
})

在這里插入圖片描述

2.3.4 提示框

前置知識：bootstrap 的 toast 提示框：

先準備對應的標簽結構（模板里已有）
設置延遲自動消失的時間

<div class="toast" data-bs-delay="1500">提示框內容
</div>

使用 JS 的方式，在 axios 請求響應成功時，展示結果

 // 創建提示框對象const toastDom = document.querySelector('css選擇器')const toast = new bootstrap.Toast(toastDom)// 顯示提示框toast.show()

提示框代碼

/*** 目標3：提交表單*  3.1 收集表單信息*  3.2 提交到服務器保存*/
/*** 目標4：結果提示*  4.1 創建toast對象*  4.2 調用show方法->顯示提示框*/
// 保存修改->點擊
document.querySelector('.submit').addEventListener('click', () => {// 3.1 收集表單信息const userForm = document.querySelector('.user-form')const userObj = serialize(userForm, { hash: true, empty: true })userObj.creator = creator// 性別數字字符串，轉成數字類型userObj.gender = +userObj.genderconsole.log(userObj)// 3.2 提交到服務器保存axios({url: 'http://hmajax.itheima.net/api/settings',method: 'PUT',data: userObj}).then(result => {// 4.1 創建toast對象const toastDom = document.querySelector('.my-toast')const toast = new bootstrap.Toast(toastDom)// 4.2 調用show方法->顯示提示框toast.show()})
})