day31 Ajax 2

目录

一、form 表单

1、什么是表单

2、表单的三个组成部分

3、form 标签的属性一览表

4、jQuery 的 serialize() 函数

二、axios 请求方法的别名

1、什么是请求方法的别名

2、全局配置请求根路径

 三、axios 拦截器

1、什么是拦截器

2、axios拦截器代码

四、文件上传

1、FormData介绍

2、FormData 的基本用法

3、使用FormData 实现头像上传

---

一、form 表单

1、什么是表单

        在网页中，表单主要负责数据采集功能。例如：

2、表单的三个组成部分

        网页中采集数据的表单由三个部分组成，分别是：表单标签、表单域、表单按钮。

（1）表单标签

        HTML 的 <form> 就是表单标签，它是一个“容器”，用来将页面上指定的区域划定为表单区域：

（2）表单域

        表单域提供了采集用户信息的渠道，常见的表单域有：input、textarea、select 等。

 注意：

• 每个表单域必须包含 name 属性，否则用户填写的信息无法被采集到！

（2）表单按钮

        当表单数据填写完毕后，用户点击表单按钮，会触发表单的提交操作，从而把采集到的数据提交给服务器。

注意：

• type="submit" 表示提交按钮的意思
• type 属性的默认值就是 submit，因此 type="submit" 可以省略不写 

3、form 标签的属性一览表

<form> 标签最重要的 3 个属性分别是 action、method 和 enctype。简介信息如下表所示：

属性	可选值	说明
action	接口的 url 地址	把表单采集到的数据，提交到哪个接口中
method	GET 或 POST	数据的提交方式（默认值为 GET）
enctype	application/x-www-form-urlencoded multipart/form-data text/plain（很少用）	数据的编码格式。具体指的是： 把表单数据提交给服务器之前，如何对将要提交的数据 进行编码（默认值 application/x-www-form-urlencoded）

注意：

• enctype 属性只能搭配 POST 提交方式一起使用；如果是 GET 提交，则 enctype 没有意义！

enctype 三个可选值之间的区别：

        只有 method 属性的值等于 POST 时，才有必要设置 enctype 属性。它的属性可选值有三个：

属性值	是否常用	应用场景
application/x-www-form-urlencoded	是	表单中不包含文件上传的场景，适用于普通数据的提交
multipart/form-data	是	表单中包含上传文件的场景
text/plain	否	无

4、jQuery 的 serialize() 函数

      <form> 表单身兼数职：既负责采集数据，又负责把数据提交到服务器！表单的默认提交行为会导致页面的跳转。跳转到了 action 属性所指向的 url 地址。而用户无法停留在当前的页面，导致体验很差。

解决方案：

• <form> 表单只负责采集数据；
• Ajax 负责将数据提交到服务器。（符合：职能单一的原则）

        通过 Ajax 提交表单采集到的数据，可以防止表单默认提交行为导致的页面跳转问题，提高用户的体验。

$('form').on('submit', function (e) {
// 阻止表单的默认提交行为
  e.preventDefault()
  axios({
    method: 'POST',
    url: 'url地址',
    data: {
      username: $('[name="username"]').val(),
      password: $('[name="password"]').val()
    }
  }).then(({ data: res }) => {
    console.log(res)
  })
})

  jQuery 的 serialize() 函数能够一次性获取到表单中采集的数据，它的语法格式如下：

• $('表单元素的选择器').serialize()

示例代码如下：

注意点：

• 在使用 serialize() 函数快速获取表单数据时，必须为每个表单域添加 name 属性！

二、axios 请求方法的别名

1、什么是请求方法的别名

在实际开发中，常用的 5 种请求方式分别是：  GET、POST、PUT、PATCH、DELETE。

为了简化开发者的使用过程，axios 为所有支持的请求方法提供了别名：

• axios.get(url[, config])
• axios.delete(url[, config])
• axios.post(url[, data[, config]])
• axios.put(url[, data[, config]])
• axios.patch(url[, data[, config]])

（1）axios.get() 的用法

  （2）axios.post() 的用法

2、全局配置请求根路径

        在 url 地址中，协议://域名:端口 对应的部分叫做“请求根路径”。全局配置请求根路径的好处：提高项目的可维护性。

假设：端口号从 3009 变成了 3006，则每个接口调用时的端口号都需要被修改！

基于 axios 提供的固定配置，即可轻松配置请求的根路径。语法格式如下：

• axios.defaults.baseURL = '请求根路径'

 三、axios 拦截器

1、什么是拦截器

拦截器（interceptors）用来全局拦截 axios 的每一次请求与响应。

好处：可以把每个请求中，某些重复性的业务代码封装到拦截器中，提高代码的复用性。

2、axios拦截器代码

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

四、文件上传

1、FormData介绍

概念：FormData 是浏览器提供的一个 WebAPI，它以键值对的方式存储数据。

作用：FormData 配合 Ajax 技术，能够向服务器发送 multipart/form-data 格式的请求体数据。

典型应用场景：FormData + Ajax 技术实现文件上传的功能。

注意：Ajax 实现文件上传的时候，请求体的编码格式必须是 multipart/form-data。

2、FormData 的基本用法

FormData 是一个构造函数，new FormData() 即可得到 FormData 对象：

// FormData 是一个构造函数，new FormData() 即可得到 FormData 对象
const  fd  =  new  FormData()  // 创建一个空白的 FormData 对象，里面没有包含任何数据。

// 调用 FormData 对象的 append(键, 值) 方法，可以向空白的 FormData 中追加键值对数据，其中：
// 键表示数据项的名字，必须是字符串
// 值表示数据项的值，可以是任意类型的数据
fd.append('username', '张三') // 键是 username，值是字符串类型
fd.append('age', 20)                  // 键是 age，           值是数字类型
fd.append('avatar', 图片文件)  // 键是 avatar，       值是文件类型

（1）发送普通的 FormData 数据

        FormData + axios 向服务器提交普通的数据（不包含文件上传）：

3、使用FormData 实现头像上传

 主要的实现步骤：

• 使用文件选择器选择图片文件
• 把用户选择的文件存入 FormData 对象
• 使用 axios 把 FormData 发送给服务器
• 模拟文件选择器的点击事件

（1）头像上传 - 使用文件选择器选择图片文件

// 1. 监听“文件选择器”的 change 事件
$('#iptFile').on('change', function (e) {
  // 2. 获取到用户选择的文件列表 FileList {0: File, length: 1}
  const files = e.target.files
  // 3. 判断用户是否选择了文件
  if (files.length === 0) return
  // 4.1 创建 FormData 对象
  const fd = new FormData()
  // 4.2 添加键值对数据，值是用户选择的文件
  fd.append('avatar', files[0])
  // TODO：通过 ajax 把 fd 对象发送给服务器
  uploadAvatar(fd)
})

（2）头像上传 - 封装 uploadAvatar 函数

// 上传头像的方法
function uploadAvatar(fd) {
  // 1. 发起 POST 请求，把 fd 对象发送给服务器
  axios.post('url地址', fd).then(({ data: res }) => {
    // 2. 如果业务状态码等于 200，证明头像上传成功
    if (res.code === 200) {
      // 3. 为头像的 img 设置 src 地址
      $('.thumb').attr('src', 'url地址' + res.url)
    }
  })
}

（3）头像上传 - 模拟文件选择器的点击事件

        使用 jQuery 提供的 click() 函数，可以轻松模拟元素的点击行为，具体请参考 jQuery 文档： https://jquery.cuishifeng.cn/click.html

// 模拟“文件选择器”的点击事件
$('#btnChoose').on('click', function () {
  // 获取到文件选择器的 jQuery 对象，并调用其原型上的 click 方法
  $('#iptFile').click()
})