Axios库-form 标签的属性,axios请求方法别名,axios拦截器使用,文件上传FormData的基本用法

最新推荐文章于 2024-05-13 16:09:14 发布

码少女壮士

最新推荐文章于 2024-05-13 16:09:14 发布

阅读量2.6k

点赞数 1

文章标签：前端 javascript html 服务器

本文链接：https://blog.csdn.net/weixin_40630195/article/details/122440857

版权

AjaxDay02

学习目标

1.掌握 Ajax 提交表单数据的用法
能够在实际项目开发中通过 axios 提交表单的数据

2.掌握 axios 拦截器的用法
能够在开发中运用拦截器展示和隐藏 loading 效果

3.掌握 FormData 的使用
能够使用 FormData 结合 axios 实现文件上传功能

form表单

表单是什么?

在网页中，表单主要负责数据采集功能.

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

在这里插入图片描述

表单域

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

在这里插入图片描述

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

表单按钮

在这里插入图片描述

注意：
①type=“submit” 表示提交按钮的意思
②type 属性的默认值就是 submit，因此 type=“submit” 可以省略不写

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三个可选值之间的区别

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

由于form表单的内部button按钮自带提交功能,页面会跳转到form表单中action属性定义的地址,但真正开发中用户无法停留在当前的页面，导致体验很差,往往不需要默认跳转页面,这时应禁止form表单页面的跳转

使用**e.preventdefault()**方法禁止form表单的默认跳转

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

$('#formLogin').on('submit', function (e) {
  e.preventDefault()
  axios({
    method: 'POST',
    url: 'http://www.liulongbin.top:3009/api/form',
    data: {
      username: $('[name="username"]').val(),
      password: $('[name="password"]').val()
    }
  }).then(({ data: res }) => {
    console.log(res)
  })
})

jQuery 的 serialize() 函数

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

注意表单域中表单元素name属性一定要赋值否则无法通过该方法依次性获取提交的表单数据,且要配合表单的submit事件一起使用,

在这里插入图片描述

axios请求方法别名

在实际开发中，常用的 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]])

体验 axios.get() 的用法

在这里插入图片描述

体验 axios.post() 的用法

在这里插入图片描述

全局配置请求根路径

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

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

在这里插入图片描述

axios拦截器

axios.interceptors设置axios拦截器

// 增加请求拦截器
axios.interceptors.request.use(function (config) {
    // 发送请求前要做的操作
  	//...
    return config;
  }, function (error) {
    // 发送错误要做的操作
  	//...
    return Promise.reject(error);
  });

// 增加响应拦截器
axios.interceptors.response.use(function (response) {
    // Any status code that lie within the range of 2xx cause this function to trigger
    // 收到响应后要做的操作
  	//...
    return response;
  }, function (error) {
    // Any status codes that falls outside the range of 2xx cause this function to trigger
    // 响应错误要做的操作
  	//...
    return Promise.reject(error);
  });

文件上传

FormData的基本用法

FormData.forEach()方法

FormData 是一个构造函数，new FormData() 即可得到 FormData 对象：
const fd = new FormData() // 创建一个空白的 FormData 对象，里面没有包含任何数据。
const fd = new FormData(表单对象)可以获得存入表单数据的formdata的二进制对象

 fd.forEach(function (value, key) {
        console.log(value, key)
      })//可以取出表单数据

FormData.append()方法

		document.querySelector('button').onclick = function () {
      	//formdata方法 append() 可添加数据
      	let fd = new FormData() //得到一个空的二进制FormDatat实例
      	fd.append('uname', 'jack')
      	fd.append('age', 18)
        fd.append('avatar', 图片文件) 
				axios.post('http://www.liulongbin.top:3009/api/formdata', fd).then((res) => {
   	 		console.log(res);
  })
}
~~~

头像上传案例

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>案例-头像上传</title>
  <link rel="stylesheet" href="./lib/bootstrap-v4.6.0.css">
  <style>
    .thumb-box {
      text-align: center;
      margin-top: 50px;
    }

    .thumb {
      width: 250px;
      height: 250px;
      object-fit: cover;
      border-radius: 50%;
    }
  </style>
</head>

<body>
  <div class="thumb-box">
    <!-- 头像 -->
    <img src="./images/cover.jpg" class="img-thumbnail thumb" alt="">
    <div class="mt-2">
      <!-- 文件选择框 -->
      <!-- accept 属性表示可选择的文件类型 -->
      <!-- image/* 表示只允许选择图片类型的文件 -->
      <input type="file" id="iptFile" accept="image/*" style="display: none;">
      <!-- 选择头像图片的按钮 -->
      <button class="btn btn-primary" id="btnChoose">选择 & 上传图片</button>
    </div>
  </div>

  <script src="./lib/jquery-v3.6.0.js"></script>
  <script src="./lib/axios.js"></script>
  <script>
    //点击文件上传,上传头像
    $('#iptFile').on('change', function (e) {
      //获取图片对象
      let files = e.target.files
      //如果文件列表长度为0,则不作操作
      if (files === 0) return
      //将图片对象转换为二进制对象
      let fd = new FormData()
      fd.append('avatar', files[0])
      //axios将装有图片文件的二进制对象发送服务器,返回服务器存放图片文件的地址
      axios.post('http://www.liulongbin.top:3009/api/upload/avatar', fd).then(({
        data: res
      }) => {
        console.log(res);
        if (res.code === 200) {
          $('.thumb-box .thumb').prop('src', 'http://www.liulongbin.top:3009' + res.url)
        }
      })
    })

    //点击button按钮事件
    $('#btnChoose').click(
      function () {
        $('#iptFile').click()
      }
    )
  </script>
</body>

</html>

码少女壮士

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Axios库-form 标签的属性,axios请求方法别名,axios拦截器使用,文件上传FormData的基本用法

Axios库-form 标签的属性,axios请求方法别名,axios拦截器使用,文件上传FormData的基本用法
复制链接

扫一扫