AJAX编程第一天案例1：图书管理

最新推荐文章于 2022-08-01 14:42:02 发布

库库好困

最新推荐文章于 2022-08-01 14:42:02 发布

阅读量1.1k

点赞数

分类专栏：八：AJAX编程（看视频）文章标签： ajax

本文链接：https://blog.csdn.net/m0_46597922/article/details/106226194

版权

本文通过一个综合案例展示了如何使用AJAX进行图书管理，包括获取图书列表、添加图书、删除图书的功能实现。详细介绍了各个接口的URL、调用方式、参数格式以及响应示例，并提供了完整的代码实现。

摘要由CSDN通过智能技术生成

综合案例1-图书管理

在这里插入图片描述

准备工作

将HTML文件，包括使用到的css和js，复制到今天的代码文件夹中。
在static.html中，写自己的代码。

图书管理接口文档

请求的根路径

http://www.liulongbin.top:3006

图书列表

接口URL： /api/getbooks
调用方式： GET
参数格式：
响应格式：
返回示例：

{
   
  "status": 200,
  "msg": "获取图书列表成功",
  "data": [
    {
    "id": 1, "bookname": "西游记", "author": "吴承恩", "publisher": "北京图书出版社" },
    {
    "id": 2, "bookname": "红楼梦", "author": "曹雪芹", "publisher": "上海图书出版社" },
    {
    "id": 3, "bookname": "三国演义", "author": "罗贯中", "publisher": "北京图书出版社" }
  ]
}

添加图书

接口URL： /api/addbook
调用方式： POST
参数格式：
响应格式：
返回示例：

{
   
    "status": 201,
    "msg": "添加图书成功"
}

删除图书

接口URL： /api/delbook
调用方式： GET
参数格式：
响应格式：
返回示例：

{
   
    "status": 200,
    "msg": "删除图书成功！"
}

获取并展示书籍

封装一个函数 getBooks
函数内部，发送ajax请求，获取书籍
把数据渲染到页面中

<script>
    // ------------------- 获取并展示书籍 -----------------------
    getBooks();

    function getBooks () {
    
      // 获取并展示书籍信息
      // 1. 按照接口文档，发送ajax请求，获取书籍数据
      $.get('http://www.liulongbin.top:3006/api/getbooks', function (res) {
    
        console.log(res);
        if (res.status === 200) {
    
          // 数据获取成功
          // 2. 展示（渲染）书籍数据
          let str =</