Ajax — 第一天

上网的目的

本质目的:浏览和消费资源

  • 资源:文字、图片、音频、视频…
  • 资源存在哪里:服务器上

服务器的概念

是负责存放和对外提供资源的电脑。它的性能比普通的计算机好太多了

客户端

获取和消费资源的电脑,叫做客户端。

我们上网的时候,一般都是用浏览器,所以我们可以称浏览器为客户端软件。

URL

什么是URL?URL是统一资源定位符。

  • 一个正确的url,对应着服务器上唯一的的一个资源。绝对不会重复。

URL的组成:

  • 协议:http https
  • 服务器名称 www.baidu.com
  • 文件在服务器上的存放位置 /liulongbinblogs/p/1132423.html

访问网络资源的步骤

  1. 客户端发送请求
  2. 服务端处理这次请求
  3. 服务器做出响应

需要记住的单词

  • request - 请求

  • response - 响应

  • data - 数据

  • method - 方式、方法

    • status - 状态
    • code - 码
    • headers - 头

网页中的资源

  • HTML – 是网页的骨架
  • CSS – 是网页的颜值
  • JS – 是网页的行为
  • 数据(Data) – 是网页的灵魂

请求资源的两种方式

向服务器发送请求的时候,可以使用很多种请求方式,最常用的请求方式是GET和POST。

  • GET - 一般用于获取服务器上的资源
  • POST - 一般用于向服务器提交数据

了解Ajax

  • 什么是ajax

  • asynchronous javascript and xml

    • 通过浏览器内置对象 XMLHttpRequest 来发送请求、接收响应结果的技术
    • 发送请求并接收响应结果,可以使用 交互 来表达
  • 为什么要学习Ajax

  • 有了ajax,就可以向服务器发送请求,获取数据

    • 目前,对于前端来说,ajax是必备技能。

ajax的应用场景

  • ajax分页
  • 无刷新的用户名验证(验证用户名是否已被占用)
  • 数据的增删改查
  • 百度地图
  • etc…

jQuery中的$.get() 方法

不带请求参数的查询:

1// 演示$.get方法的使用 2/* 3$.get(url, [data], [callback], [dataType]); 4 5 - url 必填,请求的服务器资源的url 6 - data 可选,对象类型,表示发送请求时需要携带的参数 7 - callback,可选,function类型。请求响应成功之后,这个函数会被调用。作用是获取服务器响应的结果 8 - dataType, 可选,字符串类型。表示预期服务器返回数据的类型 9*/ 10 11 12$.get('http://www.liulongbin.top:3006/api/getbooks', function (res) { 13 // res 是jQuery封装好的,它表示服务器返回的数据 14 // console.log(res); 15}); 16 17

带请求参数的查询:

1// $.get(url, [data], [callback], [dataType]); 2 3 // data 表示请求参数。是一个对象 4 // - 请求参数可以更加明确的告诉服务器,客户端需要的资源 5 6$.get('http://www.liulongbin.top:3006/api/getbooks', {id: 3}, function (res) { 7 console.log(res); 8}); 9 10

jQuery中的$.post方法

1// post方式,一般用于提交数据给服务器 2// 比如添加一本书籍(提交书名、作者、出版社给服务器) 3 4// 演示添加一本书 5let data = { 6 bookname: '水浒传', // 书的名字必须是 bookname 7 author: '施耐庵', // 作者必须是 author 8 publisher: '大宋出版社' // 出版社必须是 publisher 9}; 10$.post('http://www.liulongbin.top:3006/api/addbook', data, function (res) { 11 // res 表示服务器返回的结果 12 // console.log(res); 13}); 14 15

注意点:

  • url都是固定的,每个url必须使用对应的请求方式才可以。
  • 获取书籍时,请求参数 id也是固定的。
  • 添加书籍时,作者、书名、出版社都是必填的,而且名字都是固定的

jQuery中的$.ajax方法

$.ajax() 方法,是一个比较综合的方法,不但可以发送GET和POST方式的请求,还可以对请求做更详细的配置(后续慢慢介绍)。

1// 语法 2$.ajax({ 3 type: '', // 请求方式 4 url: '', // 请求的url地址 5 data: {}, // 请求参数 6 success: function (res) { // 请求响应整个过程成功了,触发的函数 7 // res 表示服务器返回的结果 8 } 9}); 10 11

接口

  • 概念

  • ajax请求时,使用的url地址。叫做数据接口,简称接口

  • 说明

  • 接口是由后端同学设计的(后面的node课程会讲)

    • 每个接口都有对应的请求方式

接口文档

  • 后端同学,当它设计完接口之后,会给我们前端同学提供一个接口文档
  • 前端同学,调用接口的时候,就严格按照接口文档来写代码

接口文档的组成部分:

  • 接口名称:通过接口名称可以了解接口的作用
  • url地址:
  • 请求方式:
  • 请求参数:
  • 响应数据格式:
  • 响应数据示例:

接口测试工具 - postman

下载网址:

GET方式的测试

在这里插入图片描述

POST方式的测试

在这里插入图片描述

图书管理案例

准备工作

将HTML文件,包括使用到的css和js,复制到今天的代码文件夹中。

在static.html中,写自己的代码。

获取并展示书籍

  1. 封装一个函数 getBooks

  2. 函数内部,发送ajax请求,获取书籍

  3. 把数据渲染到页面中

1// ------------------- 获取并展示书籍 ----------------------- 2getBooks(); 3 4function getBooks () { 5 // 获取并展示书籍信息 6 // 1. 按照接口文档,发送ajax请求,获取书籍数据 7 $.get('http://www.liulongbin.top:3006/api/getbooks', function (res) { 8 console.log(res); 9 if (res.status === 200) { 10 // 数据获取成功 11 // 2. 展示(渲染)书籍数据 12 let str = ''; 13 // 2.1 循环 res.data 。循环的过程中,拼接tr 14 res.data.forEach(item => { 15 str += `<tr> 16 <td>${item.id}</td> 17 <td>${item.bookname}</td> 18 <td>${item.author}</td> 19 <td>${item.publisher}</td> 20 <td> 21 <a href="javascript:;">删除</a> 22 </td> 23 </tr>`; 24 }); 25 // 2.2 循环之后,得到了82个tr.把所有的tr放到tbody标签里面 26 $('#tb').html(str); 27 } 28 }); 29} 30 31

删除书籍

  • 给删除超链接加 自定义属性 data-id="${item.id}" ,加类名 class="delete"

  • 事件委托的方案,给删除超链接注册单击事件

  • 询问是否要删除

  • 获取id

  • 根据接口文档,发送ajax请求,完成删除

  • 删除成功,调用 getBooks,从新渲染数据

1// ------------------ 删除书籍 ------------------------ 2 // 1. 注册单击事件 3 $('body').on('click', '.delete', function () { 4 // 2. 询问是否要删除 5 // let x = confirm('你确定要删除吗?你好狠!'); 6 // console.log(x); // 如果用户点了取消,confirm返回false;用户点击了确定,confirm返回true 7 if (!confirm('你确定要删除吗?你好狠!')) { 8 // 用户点击了取消,阻止代码向后执行 9 return; 10 } 11 12 // 3. 根据接口文档,发送ajax请求。从而完成删除 13 // 获取当前书籍的id 14 let id = $(this).attr('data-id'); // 123 15 // console.log(id); 16 // return; 17 $.ajax({ 18 type: 'GET', 19 url: 'http://www.liulongbin.top:3006/api/delbook', 20 data: {id: id}, 21 success: function (res) { 22 // 无论成功还是失败,反正都要提示,干脆,不用判断,直接提示 23 alert(res.msg); 24 // 4. 删除成功,让被删除的这行消失 25 if (res.status === 200) { 26 // 调用getBooks函数,让数据从新渲染一下即可 27 getBooks(); 28 } 29 } 30 }); 31 }); 32 33

添加书籍

  • 给添加按钮注册单击事件

  • 获取输入框的值(三个值)

  • 判断每个值都不能为空

  • 根据接口文档,发送ajax请求。完成添加

  • 添加成功,调用 getBooks() ,从新渲染数据

1// ------------------ 添加书籍 ------------------------ 2 // 1. 给添加按钮注册单击事件 3 $('#btnAdd').on('click', function () { 4 // 2. 获取输入框的值(三个值 书名、作者、出版社) 5 let bookname = $('#iptBookname').val().trim(); 6 let author = $('#iptAuthor').val().trim(); 7 let publisher = $('#iptPublisher').val().trim(); 8 // 3. 判断,三个值不能是空 9 if (bookname == '' || author == '' || publisher == '') { 10 alert('参数不能为空'); 11 return; 12 } 13 // 4. 根据接口文档,发送ajax请求。完成添加 14 $.post('http://www.liulongbin.top:3006/api/addbook', { 15 bookname: bookname, 16 author: author, 17 publisher: publisher 18 }, function (res) { 19 alert(res.msg); 20 // 5. 添加成功之后,从新渲染 21 if (res.status === 201) { 22 getBooks(); 23 } 24 }); 25 }); 26 27

自行修改(全已 $.ajax 的形式进行表达)

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

代码交流 2021