1.服务器相关的基础概念

1.服务器

1.服务器的本质：也是一台电脑。

2.服务器的作用：存储一个网站的文件（HTML、CSS、JS、图片、音乐.....）提供网站的文件给用户

2.资源

1.服务器上的网页(html文件)、图片、音乐、视频、字体文件、CSS文件、JS文件等等都称之为资源。所以资源代指服务器上存储的内容。 (通俗的讲，我们浏览网页时，从网络当中看到的内容都叫做资源。)

2.数据也是资源(网页中的数据，也是服务器对外提供的一种资源。例如股票数据、各行业排行榜等。)

服务器多数情况都使用数据表的方式来存储数据，和我们平时见到的表格差不多，形式如下

id	书名	作者	出版社
1	水浒传	施耐庵	北京出版社
2	三国演义	罗贯中	上海出版社
3	斗破苍穹	天蚕土豆	清华出版社
4	神墓	辰东	网络出版社
5	钢铁是怎样炼成的	奥斯特洛夫斯基	清华出版社

3.客户端

1.概念：在前端开发中，客户端特指“Web 浏览器”

2.作用：将互联网世界中的 Web 资源加载、并呈现到浏览器窗口中供用户使用。

3.服务器举例: 谷歌游览器,火狐游览器,edge(ie)游览器,safari游览器,Opera欧朋游览器

4.URL 地址（统一资源定位符）

生活中的地址，表示地球上的一个确切的地理位置 URL 地址，表示服务器上每个资源的确切位置。

url地址.png

服务器上的每个资源，都对应着独一无二的URL地址

url地址2.png 数据也是服务器上的资源对数据的操作（增删改查），也对应着不同的URL地址

url地址3.png

5.客户端与服务器通信的过程

1.就像我们（客户）去银行（服务场所）办理业务：

客户提出需求：客户提出要办理业务，比如办卡、存钱、取钱、销户、买纪念币等银行的回应：银行根据客户的需求，办理相关的业务

2.客户端与服务器之间的通信过程，分为请求 - 响应两个步骤。其中：

请求的概念：客户端通过网络去找服务器要资源的过程，叫做“请求”

响应的概念：服务器把资源通过网络发送给客户端的过程，叫做“响应

客户端与服务器通信的过程.png

6.什么是Ajax

1.Ajax 是浏览器中的技术：用来实现客户端网页请求服务器的数据。它的英文全称是 Asynchronous Javascript And XML，简称 Ajax。

2.ajax请求方式

1.ajax的5种请求方式

生活中，去银行办理业务有很多种类，比如有的客户去办卡，有的客户去销户，有的存钱，有的取钱 Ajax中，客户端浏览器在请求服务器上的数据时，根据操作性质（增删改查）的不同，可以分为以下 5 种常见的操作

序号	请求方式	描述
1	POST	向服务器新增数据
2	GET	从服务器获取数据
3	DELETE	删除服务器上的数据
4	PUT	更新服务器上的数据（侧重于完整更新：例如更新用户的完整信息）
5	PATCH	更新服务器上的数据（侧重于部分更新：例如只更新用户的手机号）

2.GET 请求

GET 请求用于从服务器获取数据：

get请求.png

3.POST 请求

POST 请求用于向服务器新增数据

post请求.png

4.DELETE 请求

DELETE 请求用于删除服务器上的数据

delete请求.png

5.PUT 请求

PUT 请求用于更新服务器上的数据（侧重于完整更新：例如更新用户的完整信息）：

put请求.png

6.PATCH 请求

PATCH 请求用于更新服务器上的数据（侧重于部分更新：例如只更新用户的手机号）：

patch请求.png

7.总结

1.操作服务器上的数据除了要使用 URL地址，还需要指定 : 请求方式

2.操作服务器上的数据时：

获取服务器上的数据，需要使用 GET 方式

新增（添加）数据，需要使用 POST 方式

删除数据，需要使用 DELETE 方式

完整修改（更新）数据，需要使用 PUT 方式

修改（更新）部分数据，需要使用 PATCH 方式

3.Ajax 基础用法

1.axios

axios（发音：艾克C奥斯）是前端圈最火的、专注于数据请求的库。

中文官网地址：www.axios-http.cn/

英文官网地址：www.npmjs.com/package/axi…

2.axios 的基础语法

1.axios 的基础语法

axios({
  method: '请求的类型',
  url: '请求的URL地址'
}).then((result) => {
  // then 用来指定请求成功之后的回调函数
  // 形参中的 result 是请求成功之后的结果
})

3.基于 axios 发起 GET 请求

测试 GET 请求的 URL 地址为 www.itcbc.com:3006/api/getbook…

1.get基本写法

axios({
  method: 'GET',
  url: 'http://www.itcbc.com:3006/api/getbooks'
}).then((result) => {
  console.log(result)
})

2.GET 请求的查询参数

axios({
  // 1. 指定请求方式为GET
  method: 'GET',
  // 2. 指定请求的 URL 地址
  url: 'http://www.itcbc.com:3006/api/getbooks',
  // 3. 查询参数
  params: {
    id: 1  //表示获取id为1的图书
  }
}).then(result => {
  console.log(result)
})

3.在 GET 请求中携带多个查询参数

axios({
  method: 'GET',
  url: 'http://www.itcbc.com:3006/api/getbooks',
  // 查询参数
  params: {
    id: 1,
    bookname: 'love'
  }
}).then(result => {
  console.log(result)
})

4.综合案列

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>1-显示完整数据</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      table {
        width: 1000px;
        margin: 0 auto;
      }
      thead tr {
        background-color: blue;
        color: #fff;
        font-size: 20px;
      }
      tbody tr:nth-child(odd) {
        background-color: green;
        color: #fff;
        font-size: 18px;
      }
      tbody tr:nth-child(even) {
        background-color: peru;
        color: #fff;
        font-size: 18px;
      }
      td,
      th {
        padding: 10px;
      }
      input {
        width: 1000px;
        display: block;
        margin: 30px auto;
        height: 100px;
        border-radius: 50px;
        border: none;
        background-color: pink;
        font-size: 40px;
        text-indent: 20px;
        color: #666;
        outline: none;
      }
    </style>
  </head>
  <body>
    <input type="text" />
    <table>
      <thead>
        <tr>
          <th>id</th>
          <th>书名</th>
          <th>作者</th>
          <th>出版社</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
    <!-- 1 引入axios -->
    <script src="./lib/axios.js"></script>
    <script>
      // 1 打开页面  发送一个ajax 请求 获取数据 -  渲染页面
      getData();

      // 2 获取输入框
      const input = document.querySelector("input");
      input.addEventListener("keydown", function (event) {
        // 2.1 判断 按下的是不是回车键
        if (event.key === "Enter") {
          // 2.2 获取输入框的值
          const value = this.value.trim(); // trim() 去除 输入框的值 的两侧的 空字符串
          // 2.3 判断是不是空字符串
          if (value) {
            // 不是空字符串
            console.log("不是空字符串");
            // bookname:"万少"
            // url 传参 ?属性名 = 属性值
            const queryStr = `?bookname=${value}`;
            // console.log(queryStr);
            getData(queryStr); // 把参数带过去
          } else {
            // 空字符串
            // console.log("空字符串");
            getData();
          }
        }
      });

      // 封装使用ajax来获取数据的函数
      function getData(query = "") {
        axios({
          method: "get",
          url: "http://www.itcbc.com:3006/api/getbooks" + query,
          // params:{},
        }).then((result) => {
          console.log(result);
          const arr = result.data.data;
          render(arr);
        });
      }

      function render(arr) {
        let html = arr
          .map(
            (value) => `
      <tr>
          <td>${value.id}</td>
          <td>${value.bookname}</td>
          <td>${value.author}</td>
          <td>${value.publisher}</td>
        </tr>
      `
          )
          .join("");
        document.querySelector("tbody").innerHTML = html;
      }
    </script>
  </body>
</html>

4.基于 axios 发起 POST 请求

使用 axios 发起 POST 请求时，只需要将 method 属性的值设置为 'POST' ，URL地址改为 '/api/addbook'：

axios({
  method: 'POST',
  url: 'http://www.itcbc.com:3006/api/addbook',
  // 请求体
  data: {
    bookname: '水浒传',
    author: '施耐庵',
    publisher: '顺义出版社'
  }
}).then(result => {
  console.log(result)
})

post案列:添加图书 – 核心代码

请求方式为 POST，请求地址为 www.itcbc.com:3006/api/addbook

$('#addBtn').on('click', function () {
  axios({
    method: 'POST',
    url: 'http://www.itcbc.com:3006/api/addbook',
    // 请求体
    data: {
      bookname: $('#bookname').val(),
      author: $('#author').val(),
      publisher: $('#publisher').val()
    }
  }).then(result => {
    console.log(result)
  })
})

4.接口相关的基础概念

1.接口的概念

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

www.itcbc.com:3006/api/getbook… 获取图书列表的接口(GET 请求)

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

接口文档就是接口的使用说明书，它是我们调用接口的依据接口文档是后端写的

接口文档的格式

组成部分	说明
接口名称	接口的名称，用来快速区分每个接口的作用。如：登录接口、添加图书接口
接口 URL	客户端发起 Ajax 调用此接口时，请求的 URL 地址
请求方式	接口的请求方式，如：GET、POST、PUT、DELETE 等
请求参数	请求此接口时，需要发送到服务器的查询参数或请求体
返回示例	当接口请求成功后，服务器响应回来的数据的基本格式
返回参数说明	接口响应结果的详细描述

Ajax课程案例接口文档: docs.apipost.cn/preview/f62…

5.appkey身份认证

服务器存储的图书，分为通用数据和个人数据。

默认获取、添加、删除、修改的都是通用数据。

在获取、添加、删除、修改时，如果带appkey参数，则表示使用个人数据。

6.综合案列

1.获取服务器上的数据

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>04-第一次获取服务器上的数据</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>id</th>
          <th>书名</th>
          <th>作者</th>
          <th>出版社</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
    <!-- 1 引入axios -->
    <script src="./lib/axios.js"></script>
    <script>


/* 
1 资源的地址 问后端要即可 
2 我们负责用对 代码 确保 数据可以请求成功 
3 不需要纠结 result的数据格式 
      只需要打印出result ，在里面 resut.data 找到数据  
      自己截图数据
4 把数据 存在自己的一个数组中
5 使用以前教过知识把数组渲染到页面中 

 */
      axios({
        method: 'get',
        url: 'http://www.itcbc.com:3006/api/getbooks',
      }).then((result) => {
        console.log(result);
        // result 请求成功的结果
        // then 固定！！ 是axios封装的一个代码  意思 服务器把数据返回了，then里面的代码就会被触发
        // 底层套了两层data 也是后台程序员做的，不用纠结 别人怎么定义的 我只负责如何拿对
        const arr = result.data.data; // 字段的名称 id、bookname、author。publisher 固定
        render(arr);
      });

      function render(arr) {
        let html = arr
          .map(
            (value) => `
      <tr>
          <td>${value.id}</td>
          <td>${value.bookname}</td>
          <td>${value.author}</td>
          <td>${value.publisher}</td>
        </tr>
      `
          )
          .join('');
        document.querySelector('tbody').innerHTML = html;
      }
    </script>
  </body>
</html>

2.指定参数获取

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>03-其他方式-指定参数</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>id</th>
          <th>书名</th>
          <th>作者</th>
          <th>出版社</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
    <!-- 1 引入axios -->
    <script src="./lib/axios.js"></script>
    <script>
      axios({
        method: 'get',
        url: 'http://www.itcbc.com:3006/api/getbooks',
        // 请求的参数  同时指定多个参数 （我想要买手机 颜色是蓝色 并且 内存是 256G ）
        // 5913	Web开发实战
        params: {
          // 0 条数据 多个参数的含义是 && 两个条件都要满足 不是 || 或者
          // id  === 5913 && 书名 === 万少 
          // 梦想  ：  我想要找 一个对象 年薪1个亿 并且 70岁以上 
          id: 5913,
          bookname: '万少',
        },
      }).then((result) => {
        console.log(result);
        const arr = result.data.data;
        render(arr);
      });

      function render(arr) {
        let html = arr
          .map(
            (value) => `
      <tr>
          <td>${value.id}</td>
          <td>${value.bookname}</td>
          <td>${value.author}</td>
          <td>${value.publisher}</td>
        </tr>
      `
          )
          .join('');
        document.querySelector('tbody').innerHTML = html;
      }
    </script>
  </body>
</html>

3.获取指定书名

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>1-显示完整数据</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      table {
        width: 1000px;
        margin: 0 auto;
      }
      thead tr {
        background-color: blue;
        color: #fff;
        font-size: 20px;
      }
      tbody tr:nth-child(odd) {
        background-color: green;
        color: #fff;
        font-size: 18px;
      }
      tbody tr:nth-child(even) {
        background-color: peru;
        color: #fff;
        font-size: 18px;
      }
      td,
      th {
        padding: 10px;
      }
      input {
        width: 1000px;
        display: block;
        margin: 30px auto;
        height: 100px;
        border-radius: 50px;
        border: none;
        background-color: skyblue;
        font-size: 40px;
        text-indent: 20px;
        color: #666;
        outline: none;
      }
    </style>
  </head>
  <body>
    <input type="text" />
    <table>
      <thead>
        <tr>
          <th>id</th>
          <th>书名</th>
          <th>作者</th>
          <th>出版社</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
    <!-- 1 引入axios -->
    <script src="./lib/axios.js"></script>
    <script>
      // 1 打开页面  发送一个ajax 请求 获取数据 -  渲染页面
      getData();

      // 2 获取输入框
      const input = document.querySelector('input');
      input.addEventListener('keydown', function (event) {
        // 2.1 判断 按下的是不是回车键
        if (event.key === 'Enter') {
          // 2.2 获取输入框的值
          const value = this.value.trim(); // trim() 去除 输入框的值 的两侧的 空字符串
          // 2.3 判断是不是空字符串
          if (value) {
            // 不是空字符串
            console.log('不是空字符串');
            // bookname:"万少"
            // url 传参 ?属性名 = 属性值
            const queryStr = `?bookname=${value}`;
            // console.log(queryStr);
            getData(queryStr); // 把参数带过去
          } else {
            // 空字符串
            // console.log("空字符串");
            getData();
          }
        }
      });

      // 封装使用ajax来获取数据的函数
      function getData(query = '') {
        axios({
          method: 'get',
          url: 'http://www.itcbc.com:3006/api/getbooks' + query,
          // params:{},
        }).then((result) => {
          console.log(result);
          const arr = result.data.data;
          render(arr);
        });
      }

      function render(arr) {
        let html = arr
          .map(
            (value) => `
      <tr>
          <td>${value.id}</td>
          <td>${value.bookname}</td>
          <td>${value.author}</td>
          <td>${value.publisher}</td>
        </tr>
      `
          )
          .join('');
        document.querySelector('tbody').innerHTML = html;
      }
    </script>
  </body>
</html>

4.post新增数据

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>07-post-新增数据.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <button>加载一个数据</button>

    <script src="./lib/axios.js"></script>
    <script>
      const button = document.querySelector('button');
      button.addEventListener('click', function () {
        // 执行 post请求新新增数据
        axios({
          method: 'post', // post
          url: 'http://www.itcbc.com:3006/api/addbook', // url
          // 参数
          data: {
            // 这个里面 不能乱写 属性名和属性值
            // 乱写参数，如果后端因为你不按照规范出了错 你前端 也是背锅
            bookname: '从入门到精通',
            author: '我自己',
            publisher: '黑马出版社', // 想传递一个数字格式 不行 （我只能去对比代码看什么地方可能出错）
            // publisher: Date.now()+"",// 想传递一个数字格式 不行 （我只能去对比代码看什么地方可能出错）
          },
        }).then((result) => {
          // 去银行操作完毕之后  存钱 取钱  纸条 告诉我们  操作成功与否
          console.log(result);
        });
      });
    </script>
  </body>
</html>

5.用户输入新增

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>08-post案例</title>

    <style>
      body {
        height: 100vh;
        display: flex;
        justify-content: space-around;
      }
      .left {
        width: 1000px;
      }
      .right {
        flex: 1;
      }
      form {
        width: 90%;
        margin: 0 auto;
        background-color: #eee;
      }
      h3 {
        background-color: brown;
        color: #fff;
        padding: 10px;
      }
      input {
        display: block;
        width: 80%;
        margin: 10px auto;
        height: 50px;
        border-radius: 5px;
        font-size: 25px;
        color: #666;
      }
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      table {
        width: 800px;
        margin: 0 auto;
      }
      thead tr {
        background-color: blue;
        color: #fff;
        font-size: 20px;
      }
      tbody tr:nth-child(odd) {
        background-color: green;
        color: #fff;
        font-size: 18px;
      }
      tbody tr:nth-child(even) {
        background-color: peru;
        color: #fff;
        font-size: 18px;
      }
      td,
      th {
        padding: 10px;
      }
      input {
        width: 800px;
        display: block;
        margin: 30px auto;
        height: 100px;
        border-radius: 50px;
        border: none;
        background-color: skyblue;
        font-size: 40px;
        text-indent: 20px;
        color: #666;
        outline: none;
      }
    </style>
  </head>
  <body>
    <div class="left">
      <input type="text" class="keyword" />
      <table>
        <thead>
          <tr>
            <th>id</th>
            <th>书名</th>
            <th>作者</th>
            <th>出版社</th>
          </tr>
        </thead>
        <tbody></tbody>
      </table>
    </div>
    <div class="right">
      <form>
        <h3>添加</h3>
        <input type="text" placeholder="书名" class="bookname" />
        <input type="text" placeholder="作者" class="author" />
        <input type="text" placeholder="出版社" class="publisher" />
        <input type="button" value="新增" class="btnadd" />
      </form>
    </div>
    <!-- 1 引入axios -->
    <script src="./lib/axios.js"></script>
    <script>
      getData();

      const keyword = document.querySelector('.keyword');
      const booknameDom = document.querySelector('.bookname');
      const authorDom = document.querySelector('.author');
      const publisherDom = document.querySelector('.publisher');
      const btnaddDom = document.querySelector('.btnadd');

      keyword.addEventListener('keydown', function (event) {
        if (event.key === 'Enter') {
          const value = this.value.trim();
          if (value) {
            console.log('不是空字符串');
            const queryStr = `?bookname=${value}`;
            getData(queryStr); // 把参数带过去
          } else {
            getData();
          }
        }
      });

      btnaddDom.addEventListener('click', function () {
        // 1 获取三个输入框的值
        const bookname = booknameDom.value;
        const author = authorDom.value;
        const publisher = publisherDom.value;

        // 2 拼接 post请求要的参数
        const data = {
          // 对象简写
          bookname,
          author,
          publisher,
        };
        // 3  发送post请求 来完成新增数据
        axios({
          method: 'post',
          url: 'http://www.itcbc.com:3006/api/addbook', // url
          // data:data,// es6 对象简写的知识
          data, // es6 对象简写的知识
        }).then((result) => {
          console.log(result);
          // 调用一次 getData
          getData();
          // 重置表单
          booknameDom.value = '';
          authorDom.value = '';
          publisherDom.value = '';
        });
      });

      // 封装使用ajax来获取数据的函数
      function getData(query = '') {
        axios({
          method: 'get',
          url: 'http://www.itcbc.com:3006/api/getbooks' + query,
          // params:{},
        }).then((result) => {
          console.log(result);
          const arr = result.data.data;
          render(arr);
        });
      }

      function render(arr) {
        let html = arr
          .map(
            (value) => `
      <tr>
          <td>${value.id}</td>
          <td>${value.bookname}</td>
          <td>${value.author}</td>
          <td>${value.publisher}</td>
        </tr>
      `
          )
          .join('');
        document.querySelector('tbody').innerHTML = html;
      }
    </script>
  </body>
</html>

6.图书管理-删除

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>10-图书管理-删除</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      table {
        width: 1000px;
        margin: 0 auto;
      }
      thead tr {
        background-color: blue;
        color: #fff;
        font-size: 20px;
      }
      tbody tr:nth-child(odd) {
        background-color: green;
        color: #fff;
        font-size: 18px;
      }
      tbody tr:nth-child(even) {
        background-color: peru;
        color: #fff;
        font-size: 18px;
      }
      td,
      th {
        padding: 10px;
      }
      input {
        width: 1000px;
        display: block;
        margin: 30px auto;
        height: 100px;
        border-radius: 50px;
        border: none;
        background-color: skyblue;
        font-size: 40px;
        text-indent: 20px;
        color: #666;
        outline: none;
      }
    </style>
  </head>
  <body>
    <input type="text" />
    <table>
      <thead>
        <tr>
          <th>id</th>
          <th>书名</th>
          <th>作者</th>
          <th>出版社</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
    <script src="./lib/axios.js"></script>
    <script>
      const tbody = document.querySelector('tbody');

      tbody.addEventListener('click', function (event) {
        if (event.target.className === 'del') {
          //  获取a标签对应的id 自定义属性
          const { id } = event.target.dataset;
          // 根据接口文档的要求 组装代码
          axios({
            url: 'http://www.itcbc.com:3006/api/delbook',
            method: 'delete',
            params: {
              id,
            },
          }).then((result) => {
            console.log(result);
            getData(); // 删除成功了 重新显示页面数据
          });
        }
      });
      getData();
      function getData(query = '') {
        axios({
          method: 'get',
          url: 'http://www.itcbc.com:3006/api/getbooks' + query,
          // params:{},
        }).then((result) => {
          console.log(result);
          const arr = result.data.data;
          render(arr);
        });
      }

      function render(arr) {
        let html = arr
          .map(
            (value) => `
      <tr>
          <td>${value.id}</td>
          <td>${value.bookname}</td>
          <td>${value.author}</td>
          <td>${value.publisher}</td>
          <td><a data-id="${value.id}" class="del" href="javascript:;">删除</a> </td>
        </tr>
      `
          )
          .join('');
        document.querySelector('tbody').innerHTML = html;
      }
    </script>
  </body>
</html>

7.补充

1.弹出确认框 confirm

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>11-弹出框.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <button>删除</button>
    <script>
      // confirm  js中自带 确认框
      // 如果用户点击 确定 返回true  点击 取消 - false
      // confirm("您舍得删除吗😶")
      document.querySelector('button').addEventListener('click', function () {
        if (confirm('您舍得删除吗😶')) {
          //
          console.log('可以执行删除');
        } else {
          console.log('取消删除');
        }
      });
    </script>
  </body>
</html>

01-ajax的基础用法