柚子快報(bào)激活碼778899分享：前端 Document

http://yzkb.51969.com/

3?? Ajax 是一種用于創(chuàng)建快速動(dòng)態(tài)網(wǎng)頁的技術(shù)。通過在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，Ajax 可以使網(wǎng)頁實(shí)現(xiàn)異步更新。這意味著可以在不重新加載整個(gè)網(wǎng)頁的情況下，對(duì)網(wǎng)頁的某部分進(jìn)行更新。

1.2 為什么要學(xué)Ajax

之前所學(xué)的技術(shù)，只能把網(wǎng)頁做的更美觀漂亮，或添加一些動(dòng)畫效果，但是，Ajax能讓我們輕松實(shí)現(xiàn)網(wǎng)頁與服務(wù)器之間的數(shù)據(jù)交互。

1.3 Ajax的典型應(yīng)用場(chǎng)景

1?? 用戶名檢測(cè)：注冊(cè)用戶時(shí)，通過 Ajax 的形式，動(dòng)態(tài)檢測(cè)用戶名是否被占用；

2?? 搜索提示：當(dāng)輸入搜索關(guān)鍵字時(shí)，通過 Ajax 的形式，動(dòng)態(tài)加載搜索提示列表；

3?? 數(shù)據(jù)分頁顯示：當(dāng)點(diǎn)擊頁碼值的時(shí)候，通過 Ajax的形式，根據(jù)頁碼值動(dòng)態(tài)刷新表格的數(shù)據(jù)；

4?? 數(shù)據(jù)的增刪改查：數(shù)據(jù)的添加、刪除、修改、查詢操作，都需要通過 Ajax的形式，來實(shí)現(xiàn)數(shù)據(jù)的交互；

（2）jQuery中的Ajax

2.1 了解jQuery中的Ajax

瀏覽器中提供的 XMLHttpRequest 用法比較復(fù)雜，所以 jQuery 對(duì) XMLHttpRequest 進(jìn)行了封裝，提供了一系列 Ajax 相關(guān)的函數(shù)，極大地降低了 Ajax 的使用難度；

jQuery 中發(fā)起 Ajax 請(qǐng)求最常用的三個(gè)方法如下：

$.get() $.post() $.ajax()

2.2 $.get()函數(shù)的語法

jQuery 中 $.get() 函數(shù)的功能單一，專門用來發(fā)起 get 請(qǐng)求，從而將服務(wù)器上的資源請(qǐng)求到客戶端來進(jìn)行使用；

$.get() 函數(shù)的語法如下：

$.get(url, [data], [callback])

三個(gè)參數(shù)各自代表的含義如下：

| 參數(shù)名 | 參數(shù)類型 | 是否必選 | 說明 |

| — | — | — | — |

| url | string | 是 | 要請(qǐng)求的資源地址 |

| data | object | 否 | 請(qǐng)求資源期間要攜帶的參數(shù) |

| callback | function | 否 | 請(qǐng)求成功時(shí)的回調(diào)函數(shù) |

2.2.1 $.get()發(fā)起不帶參數(shù)的請(qǐng)求

使用 $.get() 函數(shù)發(fā)起不帶參數(shù)的請(qǐng)求時(shí)，直接提供請(qǐng)求的 URL 地址和請(qǐng)求成功之后的回調(diào)函數(shù)即可；

完整代碼演示如下：

Document

發(fā)起不帶參數(shù)的GET請(qǐng)求

顯示效果如下：

2.2.2 $.get()發(fā)起帶參數(shù)的請(qǐng)求

使用 $.get() 函數(shù)發(fā)起帶參數(shù)的請(qǐng)求時(shí)，完整代碼演示如下：

Document

發(fā)起帶參數(shù)的GET請(qǐng)求

顯示效果如下：

2.3 $.post()函數(shù)的語法

jQuery 中 $.post() 函數(shù)的功能單一，專門用來發(fā)起 post 請(qǐng)求，從而向服務(wù)器提交數(shù)據(jù)。

$.post()函數(shù)的語法如下：

$.post(url, [data], [callback])

三個(gè)參數(shù)各自代表的含義如下：

| 參數(shù)名 | 參數(shù)類型 | 是否必選 | 說明 |

| — | — | — | — |

| url | string | 是 | 提交數(shù)據(jù)的地址 |

| data | object | 否 | 要提交的數(shù)據(jù) |

| callback | function | 否 | 數(shù)據(jù)提交成功時(shí)的回調(diào)函數(shù) |

2.3.1 $.post()向服務(wù)器提交數(shù)據(jù)

使用 $post() 向服務(wù)器提交數(shù)據(jù)的完整代碼演示如下：

Document

發(fā)起POST請(qǐng)求

顯示效果如下：

2.4 $.ajax()函數(shù)的語法

相比于 $.get() 和 $.post() 函數(shù)，jQuery 中提供的 $.ajax() 函數(shù)，是一個(gè)功能比較綜合的函數(shù)，它允許我們對(duì) Ajax 請(qǐng)求進(jìn)行更詳細(xì)的配置。

$.ajax() 函數(shù)的基本語法如下：

$.ajax({

type: ‘’, // 請(qǐng)求的方式，例如 GET 或 POST

url: ‘’, // 請(qǐng)求的 URL 地址

data: { },// 這次請(qǐng)求要攜帶的數(shù)據(jù)

success: function(res) { } // 請(qǐng)求成功之后的回調(diào)函數(shù)

})

2.4.1 使用$.ajax()發(fā)起GET請(qǐng)求

使用 $.ajax() 發(fā)起 GET 請(qǐng)求時(shí)，只需要將 type 屬性的值設(shè)置為 'GET' 即可；、

完整代碼演示如下：

Document

發(fā)起GET請(qǐng)求

2.4.2 使用$.ajax()發(fā)起POST請(qǐng)求

使用 $.ajax()發(fā)起 POST 請(qǐng)求時(shí)，只需要將 type 屬性的值設(shè)置為 'POST' 即可；

完整代碼演示如下：

Document

發(fā)起GET請(qǐng)求

（3）接口

3.1 接口的概念

使用 Ajax 請(qǐng)求數(shù)據(jù)時(shí)，被請(qǐng)求的 URL 地址，就叫做數(shù)據(jù)接口（簡(jiǎn)稱接口）。同時(shí)，每個(gè)接口必須有請(qǐng)求方式。

3.2 分析接口的請(qǐng)求過程

1?? 通過GET方式請(qǐng)求接口的過程

2?? 通過POST方式請(qǐng)求接口的過程

3.3 接口測(cè)試工具

3.3.1 什么是接口測(cè)試工具

1?? 為了驗(yàn)證接口能否被正常被訪問，我們常常需要使用接口測(cè)試工具，來對(duì)數(shù)據(jù)接口進(jìn)行檢測(cè)。

2?? 好處：接口測(cè)試工具能讓我們?cè)诓粚懭魏未a的情況下，對(duì)接口進(jìn)行調(diào)用和測(cè)試。

3.3.2 下載并安裝PostMan

PostMan 的官方下載網(wǎng)址：https://www.postman.com/downloads/，下載所需的安裝程序后，直接安裝即可。

?溫馨提醒?：由于PostMan為全英版軟件，小伙伴們?nèi)绻X得上手起來比較困難，可以登錄博客或B站上找相關(guān)的視頻來進(jìn)行了解學(xué)習(xí)哦！

3.4 接口文檔

3.4.1 什么是接口文檔

接口文檔，顧名思義就是接口的說明文檔，它是我們調(diào)用接口的依據(jù)。好的接口文檔包含了對(duì)接口URL，參數(shù)以及輸出內(nèi)容的說明，我們參照接口文檔就能方便的知道接口的作用，以及接口如何進(jìn)行調(diào)用。

3.4.2 接口文檔的組成部分

接口文檔可以包含很多信息，也可以按需進(jìn)行精簡(jiǎn)，不過，一個(gè)合格的接口文檔，應(yīng)該包含以下6項(xiàng)內(nèi)容，從而為接口的調(diào)用提供依據(jù)：

接口名稱：用來標(biāo)識(shí)各個(gè)接口的簡(jiǎn)單說明，如登錄接口，獲取圖書列表接口等； 接口URL：接口的調(diào)用地址； 調(diào)用方式：接口的調(diào)用方式，如 GET 或 POST； 參數(shù)格式：接口需要傳遞的參數(shù)，每個(gè)參數(shù)必須包含參數(shù)名稱、參數(shù)類型、是否必選、參數(shù)說明這4項(xiàng)內(nèi)容； 響應(yīng)格式：接口的返回值的詳細(xì)描述，一般包含數(shù)據(jù)名稱、數(shù)據(jù)類型、說明3項(xiàng)內(nèi)容； 返回示例（可選）：通過對(duì)象的形式，例舉服務(wù)器返回?cái)?shù)據(jù)的結(jié)構(gòu)；

三、案例分析 - 圖書管理

（1）渲染UI結(jié)構(gòu)

（2）案例用到的庫和插件

1?? 用到的 css 庫 bootstrap.css

2?? 用到的 javascript 庫 jquery.js

3?? 用到的 vs code 插件 Bootstrap 3 Snippets

（3）渲染圖書列表（核心代碼）

function getBookList() {

// 1. 發(fā)起 ajax 請(qǐng)求獲取圖書列表數(shù)據(jù)

$.get(‘http://www.liulongbin.top:3006/api/getbooks’, function(res) {

// 2. 獲取列表數(shù)據(jù)是否成功

if (res.status !== 200) return alert(‘獲取圖書列表失敗！’)

// 3. 渲染頁面結(jié)構(gòu)

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. 渲染表格結(jié)構(gòu)

})

}

（4）刪除圖書（核心代碼）

// 1. 為按鈕綁定點(diǎn)擊事件處理函數(shù)

$(‘tbody’).on(‘click’, ‘.del’, function() {

// 2. 獲取要?jiǎng)h除的圖書的 Id

var id = $(this).attr(‘data-id’)

$.ajax({ // 3. 發(fā)起 ajax 請(qǐng)求，根據(jù) id 刪除對(duì)應(yīng)的圖書

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. 檢測(cè)內(nèi)容是否為空

var bookname = $(‘#bookname’).val()

var author = $(‘#author’).val()

var publisher = $(‘#publisher’).val()

if (bookname === ‘’ || author === ‘’ || publisher === ‘’) {

return alert(‘請(qǐng)完整填寫圖書信息！’)

}

// 2. 發(fā)起 ajax 請(qǐng)求，添加圖書信息

$.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. 清空文本框內(nèi)容

}

)

（5）完整代碼演示

Document

添加新圖書

書名

作者

出版社

添加

Id 書名 作者 出版社 操作

柚子快報(bào)激活碼778899分享：前端 Document

http://yzkb.51969.com/

相關(guān)文章