Ajax--初识Ajax--接口和案例 - 图书管理

最新推荐文章于 2025-01-30 23:21:23 发布

真爱计划

最新推荐文章于 2025-01-30 23:21:23 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：数据交互&异步编程-前端进阶Ajax 文章标签： 1024程序员节

本文链接：https://blog.csdn.net/weixin_64612659/article/details/127494715

数据交互&异步编程-前端进阶Ajax 专栏收录该内容

22 篇文章

订阅专栏

本文介绍了接口测试的基础概念及重要性，并详细讲解了如何使用PostMan工具进行GET和POST接口测试。此外，还提供了创建和理解接口文档的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

接口的概念

使用 Ajax 请求数据时，被请求的 URL 地址，就叫做数据接口（简称接口）。同时，每个接口必须有请求方式。

例如：

http://www.liulongbin.top:3006/api/getbooks 获取图书列表的接口(GET请求)

http://www.liulongbin.top:3006/api/addbook 添加图书的接口（POST请求）

分析接口的请求过程

1. 通过GET方式请求接口的过程

2. 通过POST方式请求接口的过程

接口测试工具

1. 什么是接口测试工具

为了验证接口能否被正常被访问，我们常常需要使用接口测试工具，来对数据接口进行检测。

好处：接口测试工具能让我们在不写任何代码的情况下，对接口进行调用和测试。

2. 下载并安装PostMan

访问 PostMan 的官方下载网址 Download Postman | Get Started for Free，下载所需的安装程序后，直接安装即可。

使用PostMan测试GET接口

步骤：

1.选择请求的方式

2.填写请求的URL地址

3.填写请求的参数

4.点击 Send 按钮发起 GET 请求

5.查看服务器响应的结果

get要在Params下添加参数

使用PostMan测试POST接口

步骤：

1.选择请求的方式

2.填写请求的URL地址

3.选择 Body 面板并勾选数据格式

4.填写要发送到服务器的数据

5.点击 Send 按钮发起 POST 请求

6.查看服务器响应的结果

接口文档

1. 什么是接口文档

接口文档，顾名思义就是接口的说明文档，它是我们调用接口的依据。好的接口文档包含了对接口URL，参数以及输出内容的说明，我们参照接口文档就能方便的知道接口的作用，以及接口如何进行调用。

2. 接口文档的组成部分

接口文档可以包含很多信息，也可以按需进行精简，不过，一个合格的接口文档，应该包含以下6项内容，从而为接口的调用提供依据：

1. 接口名称：用来标识各个接口的简单说明，如登录接口，获取图书列表接口等。

2. 接口URL：接口的调用地址。

3. 调用方式：接口的调用方式，如 GET 或 POST。

4. 参数格式：接口需要传递的参数，每个参数必须包含参数名称、参数类型、是否必选、参数说明这4项内容。

5. 响应格式：接口的返回值的详细描述，一般包含数据名称、数据类型、说明3项内容。

6. 返回示例（可选）：通过对象的形式，例举服务器返回数据的结构。

3. 接口文档示例

案例 - 图书管理

渲染UI结构

案例用到的库和插件

用到的 css 库 bootstrap.css

用到的 javascript 库 jquery.js

用到的 vs code 插件 Bootstrap 3 Snippets

输入panel panel可以快捷生成

panel-body输入

又快速生成了

在 <div class="panel panel-primary">输入form-inline就可以实现在同一行

输入bs3-table选择有边框的快速生成

渲染图书列表（核心代码）

function getBookList() {
    // 1. 发起 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. 循环拼接字符串
            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. 渲染表格结构
    })
}

遍历的对象是res.data

rows的值为

删除图书（核心代码）

// 1. 为按钮绑定点击事件处理函数
$('tbody').on('click', '.del', function() {
    // 2. 获取要删除的图书的 Id
    var id = $(this).attr('data-id')
    $.ajax({ // 3. 发起 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. 删除成功后，重新加载图书列表
        }
    })
})

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

这样绑定是无效的，因为a是后面添加生成的，页面是没有存在的，因此我们要用数据代理的方式，也就它的父元素tbody,因为tbody一开始就是存在的

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

这句话的意思就是tbody代理.del生成事件

添加图书（核心代码）

// 1. 检测内容是否为空
var bookname = $('#bookname').val()
var author = $('#author').val()
var publisher = $('#publisher').val()
if (bookname === '' || author === '' || publisher === '') {
    return alert('请完整填写图书信息！')
}
// 2. 发起 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. 清空文本框内容
    }
)