柚子快報激活碼778899分享：前端 Document
柚子快報激活碼778899分享：前端 Document
3?? Ajax 是一種用于創(chuàng)建快速動態(tài)網頁的技術。通過在后臺與服務器進行少量數據交換，Ajax 可以使網頁實現(xiàn)異步更新。這意味著可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。
1.2 為什么要學Ajax
之前所學的技術，只能把網頁做的更美觀漂亮，或添加一些動畫效果，但是，Ajax能讓我們輕松實現(xiàn)網頁與服務器之間的數據交互。
1.3 Ajax的典型應用場景
1?? 用戶名檢測：注冊用戶時，通過 Ajax 的形式，動態(tài)檢測用戶名是否被占用；
2?? 搜索提示：當輸入搜索關鍵字時，通過 Ajax 的形式，動態(tài)加載搜索提示列表；
3?? 數據分頁顯示：當點擊頁碼值的時候，通過 Ajax的形式，根據頁碼值動態(tài)刷新表格的數據；
4?? 數據的增刪改查：數據的添加、刪除、修改、查詢操作，都需要通過 Ajax的形式，來實現(xiàn)數據的交互；
（2）jQuery中的Ajax
2.1 了解jQuery中的Ajax
瀏覽器中提供的 XMLHttpRequest 用法比較復雜，所以 jQuery 對 XMLHttpRequest 進行了封裝，提供了一系列 Ajax 相關的函數，極大地降低了 Ajax 的使用難度；
jQuery 中發(fā)起 Ajax 請求最常用的三個方法如下：
$.get() $.post() $.ajax()
2.2 $.get()函數的語法
jQuery 中 $.get() 函數的功能單一，專門用來發(fā)起 get 請求，從而將服務器上的資源請求到客戶端來進行使用；
$.get() 函數的語法如下：
$.get(url, [data], [callback])
三個參數各自代表的含義如下：
| 參數名 | 參數類型 | 是否必選 | 說明 |
| — | — | — | — |
| url | string | 是 | 要請求的資源地址 |
| data | object | 否 | 請求資源期間要攜帶的參數 |
| callback | function | 否 | 請求成功時的回調函數 |
2.2.1 $.get()發(fā)起不帶參數的請求
使用 $.get() 函數發(fā)起不帶參數的請求時，直接提供請求的 URL 地址和請求成功之后的回調函數即可；
完整代碼演示如下：
Document
發(fā)起不帶參數的GET請求
顯示效果如下：
2.2.2 $.get()發(fā)起帶參數的請求
使用 $.get() 函數發(fā)起帶參數的請求時，完整代碼演示如下：
Document
發(fā)起帶參數的GET請求
顯示效果如下：
2.3 $.post()函數的語法
jQuery 中 $.post() 函數的功能單一，專門用來發(fā)起 post 請求，從而向服務器提交數據。
$.post()函數的語法如下：
$.post(url, [data], [callback])
三個參數各自代表的含義如下：
| 參數名 | 參數類型 | 是否必選 | 說明 |
| — | — | — | — |
| url | string | 是 | 提交數據的地址 |
| data | object | 否 | 要提交的數據 |
| callback | function | 否 | 數據提交成功時的回調函數 |
2.3.1 $.post()向服務器提交數據
使用 $post() 向服務器提交數據的完整代碼演示如下：
Document
發(fā)起POST請求
顯示效果如下：
2.4 $.ajax()函數的語法
相比于 $.get() 和 $.post() 函數，jQuery 中提供的 $.ajax() 函數，是一個功能比較綜合的函數，它允許我們對 Ajax 請求進行更詳細的配置。
$.ajax() 函數的基本語法如下：
$.ajax({
type: ‘’, // 請求的方式，例如 GET 或 POST
url: ‘’, // 請求的 URL 地址
data: { },// 這次請求要攜帶的數據
success: function(res) { } // 請求成功之后的回調函數
})
2.4.1 使用$.ajax()發(fā)起GET請求
使用 $.ajax() 發(fā)起 GET 請求時，只需要將 type 屬性的值設置為 'GET' 即可；、
完整代碼演示如下：
Document
發(fā)起GET請求
2.4.2 使用$.ajax()發(fā)起POST請求
使用 $.ajax()發(fā)起 POST 請求時，只需要將 type 屬性的值設置為 'POST' 即可；
完整代碼演示如下：
Document
發(fā)起GET請求
（3）接口
3.1 接口的概念
使用 Ajax 請求數據時，被請求的 URL 地址，就叫做數據接口（簡稱接口）。同時，每個接口必須有請求方式。
3.2 分析接口的請求過程
1?? 通過GET方式請求接口的過程
2?? 通過POST方式請求接口的過程
3.3 接口測試工具
3.3.1 什么是接口測試工具
1?? 為了驗證接口能否被正常被訪問，我們常常需要使用接口測試工具，來對數據接口進行檢測。
2?? 好處：接口測試工具能讓我們在不寫任何代碼的情況下，對接口進行調用和測試。
3.3.2 下載并安裝PostMan
PostMan 的官方下載網址：https://www.postman.com/downloads/，下載所需的安裝程序后，直接安裝即可。
?溫馨提醒?：由于PostMan為全英版軟件，小伙伴們如果覺得上手起來比較困難，可以登錄博客或B站上找相關的視頻來進行了解學習哦！
3.4 接口文檔
3.4.1 什么是接口文檔
接口文檔，顧名思義就是接口的說明文檔，它是我們調用接口的依據。好的接口文檔包含了對接口URL，參數以及輸出內容的說明，我們參照接口文檔就能方便的知道接口的作用，以及接口如何進行調用。
3.4.2 接口文檔的組成部分
接口文檔可以包含很多信息，也可以按需進行精簡，不過，一個合格的接口文檔，應該包含以下6項內容，從而為接口的調用提供依據：
接口名稱：用來標識各個接口的簡單說明，如登錄接口，獲取圖書列表接口等； 接口URL：接口的調用地址； 調用方式：接口的調用方式，如 GET 或 POST； 參數格式：接口需要傳遞的參數，每個參數必須包含參數名稱、參數類型、是否必選、參數說明這4項內容； 響應格式：接口的返回值的詳細描述，一般包含數據名稱、數據類型、說明3項內容； 返回示例（可選）：通過對象的形式，例舉服務器返回數據的結構；
三、案例分析 - 圖書管理
（1）渲染UI結構
（2）案例用到的庫和插件
1?? 用到的 css 庫 bootstrap.css
2?? 用到的 javascript 庫 jquery.js
3?? 用到的 vs code 插件 Bootstrap 3 Snippets
（3）渲染圖書列表（核心代碼）
function getBookList() {
// 1. 發(fā)起 ajax 請求獲取圖書列表數據
$.get(‘http://www.liulongbin.top:3006/api/getbooks’, function(res) {
// 2. 獲取列表數據是否成功
if (res.status !== 200) return alert(‘獲取圖書列表失?。 ?
// 3. 渲染頁面結構
var rows = []
$.each(res.data, function(i, item) { // 4. 循環(huán)拼接字符串
rows.push(‘’ + item.id + ‘’ + item.bookname + ‘’ + item.author + ‘’ + item.publisher + ‘刪除’)
})
$(‘#bookBody’).empty().append(rows.join(‘’)) // 5. 渲染表格結構
})
}
（4）刪除圖書（核心代碼）
// 1. 為按鈕綁定點擊事件處理函數
$(‘tbody’).on(‘click’, ‘.del’, function() {
// 2. 獲取要刪除的圖書的 Id
var id = $(this).attr(‘data-id’)
$.ajax({ // 3. 發(fā)起 ajax 請求，根據 id 刪除對應的圖書
type: ‘GET’,
url: ‘http://www.liulongbin.top:3006/api/delbook’,
data: { id: id },
success: function(res) {
if (res.status !== 200) return alert(‘刪除圖書失??！’)
getBookList() // 4. 刪除成功后，重新加載圖書列表
}
})
})
（5）添加圖書（核心代碼）
// 1. 檢測內容是否為空
var bookname = $(‘#bookname’).val()
var author = $(‘#author’).val()
var publisher = $(‘#publisher’).val()
if (bookname === ‘’ || author === ‘’ || publisher === ‘’) {
return alert(‘請完整填寫圖書信息！’)
}
// 2. 發(fā)起 ajax 請求，添加圖書信息
$.post(
‘http://www.liulongbin.top:3006/api/addbook’,
{ bookname: bookname, author: author, publisher: publisher },
function(res) {
// 3. 判斷是否添加成功
if (res.status !== 201) return alert(‘添加圖書失敗！’)
getBookList() // 4. 添加成功后，刷新圖書列表
$(‘input:text’).val(‘’) // 5. 清空文本框內容
}
)
（5）完整代碼演示
Document
添加新圖書
書名
作者
出版社
添加
Id 書名 作者 出版社 操作
柚子快報激活碼778899分享：前端 Document
相關文章
本文內容根據網絡資料整理，出于傳遞更多信息之目的，不代表金鑰匙跨境贊同其觀點和立場。
轉載請注明，如有侵權，聯(lián)系刪除。
Dafiti鞋履風尚
