接口的概念

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

例如：

http://www.liulongbin.top:3006/api/getbooks? 獲取圖書(shū)列表的接口(GET請(qǐng)求)

http://www.liulongbin.top:3006/api/addbook?? 添加圖書(shū)的接口（POST請(qǐng)求）

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

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

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

接口測(cè)試工具

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

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

好處：接口測(cè)試工具能讓我們?cè)?/span>不寫(xiě)任何代碼的情況下，對(duì)接口進(jìn)行調(diào)用和測(cè)試。

2. 下載并安裝PostMan

訪問(wèn) PostMan 的官方下載網(wǎng)址 Download Postman | Get Started for Free，下載所需的安裝程序后，直接安裝即可。?

?

?使用PostMan測(cè)試GET接口

步驟：

1.選擇請(qǐng)求的方式

2.填寫(xiě)請(qǐng)求的URL地址

3.填寫(xiě)請(qǐng)求的參數(shù)

4.點(diǎn)擊 Send 按鈕發(fā)起 GET 請(qǐng)求

5.查看服務(wù)器響應(yīng)的結(jié)果

get要在Params下添加參數(shù)?

使用PostMan測(cè)試POST接口

步驟：

1.選擇請(qǐng)求的方式

2.填寫(xiě)請(qǐng)求的URL地址

3.選擇 Body 面板并勾選數(shù)據(jù)格式

4.填寫(xiě)要發(fā)送到服務(wù)器的數(shù)據(jù)

5.點(diǎn)擊 Send 按鈕發(fā)起 POST 請(qǐng)求

6.查看服務(wù)器響應(yīng)的結(jié)果

?接口文檔

1. 什么是接口文檔

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

2. 接口文檔的組成部分

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

1. 接口名稱：用來(lái)標(biāo)識(shí)各個(gè)接口的簡(jiǎn)單說(shuō)明，如登錄接口，獲取圖書(shū)列表接口等。

2. 接口URL：接口的調(diào)用地址。

3. 調(diào)用方式：接口的調(diào)用方式，如 GET 或 POST。

4. 參數(shù)格式：接口需要傳遞的參數(shù)，每個(gè)參數(shù)必須包含參數(shù)名稱、參數(shù)類型、是否必選、參數(shù)說(shuō)明這4項(xiàng)內(nèi)容。

5. 響應(yīng)格式：接口的返回值的詳細(xì)描述，一般包含數(shù)據(jù)名稱、數(shù)據(jù)類型、說(shuō)明3項(xiàng)內(nèi)容。

6. 返回示例（可選）：通過(guò)對(duì)象的形式，例舉服務(wù)器返回?cái)?shù)據(jù)的結(jié)構(gòu)。

3. 接口文檔示例

?

案例 - 圖書(shū)管理

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

?案例用到的庫(kù)和插件

用到的 css 庫(kù) bootstrap.css

用到的 javascript 庫(kù) jquery.js

用到的 vs code 插件 Bootstrap 3 Snippets

?輸入panel panel可以快捷生成

?panel-body輸入

又快速生成了

?在?<div class="panel panel-primary">輸入form-inline就可以實(shí)現(xiàn)在同一行

?

輸入bs3-table選擇有邊框的快速生成?

?

渲染圖書(shū)列表（核心代碼）

function getBookList() {
    // 1. 發(fā)起 ajax 請(qǐng)求獲取圖書(shū)列表數(shù)據(jù)
    $.get('http://www.liulongbin.top:3006/api/getbooks', function(res) {
        // 2. 獲取列表數(shù)據(jù)是否成功
        if (res.status !== 200) return alert('獲取圖書(shū)列表失?。?)
        // 3. 渲染頁(yè)面結(jié)構(gòu)
        var rows = []
        $.each(res.data, function(i, item) { // 4. 循環(huán)拼接字符串
            rows.push('<tr><td>' + item.id + '</td><td>' + item.bookname + '</td><td>' + item.author + '</td><td>' + item.publisher + '</td><td><a href="javascript:;">刪除</a></td></tr>')
        })
        $('#bookBody').empty().append(rows.join('')) // 5. 渲染表格結(jié)構(gòu)
    })
}

?遍歷的對(duì)象是res.data

?rows的值為

?刪除圖書(shū)（核心代碼）

// 1. 為按鈕綁定點(diǎn)擊事件處理函數(shù)
$('tbody').on('click', '.del', function() {
    // 2. 獲取要?jiǎng)h除的圖書(shū)的 Id
    var id = $(this).attr('data-id')
    $.ajax({ // 3. 發(fā)起 ajax 請(qǐng)求，根據(jù) id 刪除對(duì)應(yīng)的圖書(shū)
        type: 'GET',
        url: 'http://www.liulongbin.top:3006/api/delbook',
        data: { id: id },
        success: function(res) {
            if (res.status !== 200) return alert('刪除圖書(shū)失??！') 
            getBookList() // 4. 刪除成功后，重新加載圖書(shū)列表
        }
    })
})

$('.del').on('click',function(){
               console.log('ok');
           })

這樣綁定是無(wú)效的，因?yàn)閍是后面添加生成的，頁(yè)面是沒(méi)有存在的，因此我們要用數(shù)據(jù)代理的方式，也就它的父元素tbody,因?yàn)閠body一開(kāi)始就是存在的

?$('tbody').on('click','.del')

這句話的意思就是tbody代理.del生成事件?

??添加圖書(shū)（核心代碼）

// 1. 檢測(cè)內(nèi)容是否為空
var bookname = $('#bookname').val()
var author = $('#author').val()
var publisher = $('#publisher').val()
if (bookname === '' || author === '' || publisher === '') {
    return alert('請(qǐng)完整填寫(xiě)圖書(shū)信息！')
}
// 2. 發(fā)起 ajax 請(qǐng)求，添加圖書(shū)信息
$.post(
    'http://www.liulongbin.top:3006/api/addbook',
    { bookname: bookname, author: author, publisher: publisher },
    function(res) {
        // 3. 判斷是否添加成功
        if (res.status !== 201) return alert('添加圖書(shū)失??！')
        getBookList() // 4. 添加成功后，刷新圖書(shū)列表
        $('input:text').val('') // 5. 清空文本框內(nèi)容
    }
)

文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-411299.html

到了這里，關(guān)于Ajax--初識(shí)Ajax--接口和案例 - 圖書(shū)管理的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！