玩转表格提交：基础form表单操作、Ajax提交数据实例、Axios拦截器功能以及文件上传实战指南

最编程 2024-07-20 21:45:26

...

form表单与文件上传

1. form表单的基本使用

1.1 什么是表单

表单在网页中主要负责数据采集功能。HTML中的<form>标签，就是用于采集用户输入的信息，并通过<form>标签的提交操作，把采集到的信息提交到服务器端进行处理。

<form>
    <input type="text" name="email_or_mobile" />
    <input type="password" name="password" />
    <input type="checkbox" name="remember_me" checked />
    <button type="submit">提交</button>
</form>

1.2 表单的组成部分

form表单标签
input表单域
button表单按钮

<form>
    <input type="text" name="email_or_mobile" />
    <input type="password" name="password" />
    <input type="checkbox" name="remember_me" checked />
    <button type="submit">提交</button>
</form>

1.3 `<form>`标签的属性

<form>标签用来采集数据

<form>标签的属性则是用来规定如何把采集到的数据发送到服务器。

1. action

action 属性用来规定当提交表单时，向何处发送表单数据。
action 属性的值应该是后端提供的一个 URL 地址，这个 URL 地址专门负责接收表单提交过来的数据。
当表单在未指定 action 属性值的情况下，action 的默认值为当前页面的 URL 地址。

注意：当提交表单后，页面会立即跳转到 action 属性指定的 URL 地址

2. target

target 属性用来规定在何处打开 action URL。

它的可选值有5个，默认情况下，target 的值是 _self，表示在相同的框架中打开 action URL。

3. method

method 属性用来规定以何种方式把表单数据提交到 action URL。

它的可选值有两个，分别是 get 和 post。

默认情况下，method 的值为 get，表示通过URL地址的形式，把表单数据提交到 action URL。

注意：

get 方式适合用来提交少量的、简单的数据。
post 方式适合用来提交大量的、复杂的、或包含文件上传的数据。
在实际开发中，表单的 post 提交方式用的最多，很少用 get。例如登录、注册、添加数据等表单操作，都需要使用 post 方式来提交表单。

4. enctype

enctype 属性用来规定在发送表单数据之前如何对数据进行编码。

它的可选值有三个，默认情况下，enctype 的值为 application/x-www-form-urlencoded，表示在发送前编码所有的字符。

注意：

在涉及到文件上传的操作时，必须将 enctype 的值设置为 multipart/form-data
如果表单的提交不涉及到文件上传操作，则直接将 enctype 的值设置为 application/x-www-form-urlencoded 即可！

1.4 表单的同步提交及缺点

1. 什么是表单的同步提交

通过点击 submit 按钮，触发表单提交的操作，从而使页面跳转到 action URL 的行为，叫做表单的同步提交。

2. 表单同步提交的缺点

<form>表单同步提交后，整个页面会发生跳转，跳转到 action URL 所指向的地址，用户体验很差。
<form>表单同步提交后，页面之前的状态和数据会丢失。

3. 如何解决表单同步提交的缺点

解决方案：表单只负责采集数据，Ajax 负责将数据提交到服务器。

2. 通过Ajax提交表单数据

2.1 监听表单提交事件

在 jQuery 中，可以使用如下两种方式，监听到表单的提交事件：

$('#form1').submit(function(e) {
   alert('监听到了表单的提交事件')
})

$('#form1').on('submit', function(e) {
   alert('监听到了表单的提交事件')
})

2.2 阻止表单默认提交行为

当监听到表单的提交事件以后，可以调用事件对象的 event.preventDefault() 函数，来阻止表单的提交和页面的跳转，示例代码如下：

$('#form1').submit(function(e) {
   // 阻止表单的提交和页面的跳转
   e.preventDefault()
})

$('#form1').on('submit', function(e) {
   // 阻止表单的提交和页面的跳转
   e.preventDefault()
})

2.3 快速获取表单中的数据

1. serialize()函数

为了简化表单中数据的获取操作，jQuery 提供了 serialize() 函数，其语法格式如下：

$('#form').serialize()

2. serialize()函数示例

    <form action="http://www.liulongbin.top:3006/api/form" method="post" enctype="application/x-www-form-urlencoded">
        <input type="text" name="username" />
        <input type="password" name="password" />
        <input type="checkbox" name="remember_me" checked />
        <button type="submit">提交</button>
    </form>
    

<script src="../素材/day2-素材/lib/jquery.js"></script>
<script>
console.log($('form').serialize());
</script>

3. serialize() 函数的使用注意点

2.4 通过 Ajax 提交表单数据

通过 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);
        });
      });

监听表单的 submit 提交事件
阻止默认提交行为
基于 axios 发起请求
指定请求方式、请求地址
指定请求体数据

总结

① form 表单的作用是什么？

答案：采集数据

② 采集到的表单数据，是否需要提交给服务器？

答案：需要

③ 把表单采集到的数据提交给服务器时，是否需要指定请求的方式与请求的 URL 地址？

答案：需要

2.5 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.get() 可以方便快捷地发起 GET 请求：

axios.defaults.baseURL = "http://www.liulongbin.top:3006"
axios.get("/api/getbooks").then((result)=>{
    console.log(result);
})

体验 axios.post() 的用法

使用 axios.post() 可以方便快捷地发起 POST 请求：

axios.defaults.baseURL = "http://www.liulongbin.top:3006"
axios.POST("/api/getbooks").then((result)=>{
    console.log(result);
})

2.6全局配置请求根路径

在 url 地址中，协议://域名:端口 对应的部分叫做“请求根路径”。

全局配置请求根路径的好处：提高项目的可维护性。

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

全局配置请求根路径 - 语法格式

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

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

案例 - 图书管理

案例效果

核心实现步骤：

请求并渲染图书列表的数据
添加图书
删除图书

      axios.defaults.baseURL = 'http://www.liulongbin.top:3006';
      $(function () {
        // 请求并渲染图书列表的数据
        function bookList() {
          axios({
            method: 'GET',
            url: '/api/getbooks',
          }).then(data => {
            // console.log(data.data.data[0]);
            let a = data.data.data;
            a.map(function (item, index) {
              $('tbody').append(
                `
            <tr>
                <th scope="row">${item.id}</th>
                <td>${item.bookname}</td>
                <td>${item.author}</td>
                <td>${item.publisher}</td>
                <td>
                  <button type="button" class="btn btn-link btn-sm" data-id="${item.id}">删除</button>
                </td>
            </tr>
          `,
              );
            });
          });
        }
        bookList();
        // 添加图书 监听表单的 submit 事件，阻止默认提交行为后，基于 axios 发起 Ajax 请求。核心代码如下：
        $('#addForm').submit(function (e) {
          e.preventDefault();

          axios({
            method: 'POST',
            url: '/api/addbook',
            // data:{
            //   bookname:$('.form-control').val(),
            //   author:$('.form-control').val(),
            //   publisher:$('.form-control').val()
            // }
            data: $('#addForm').serialize(),
          }).then(({ data: res }) => {
            console.log(res);
            if (res.code === 201) {
              bookList();
              this.reset();
            }
          });
        });
        // 删除图书 调用删除图书的接口，根据图书的 id 删除对应的图书信息。核心代码如下：
        $('tbody').on('click', '.btn-link', function () {
          if (confirm('确定删除图书')) {
            const id = $(this).attr('data-id');
            axios
              .delete('/api/delbook', { params: { id } })
              .then(({ data}) => {
                if (data.status == 200) {
                  bookList();
                  alert('删除成功')
                }else{
                  alert(data.msg)
                }
              });
          }
        });
      });

3. axios 拦截器

什么是拦截器

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

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

不使用拦截器 - 实现 loading 效果

需要在每个请求中分别展示和隐藏 loading 效果。示例代码如下：

使用拦截器 - 实现 loading 效果

在响应拦截器中隐藏 loading 效果：

4. 文件上传

FormData

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

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

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

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

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， 值是文件类型

发送普通的 FormData 数据

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

结合 FormData 实现头像上传

主要的实现步骤：

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

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


// 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)

})

头像上传 - 封装 uploadAvatar 函数


// 上传头像的方法

function uploadAvatar(fd) {

// 1. 发起 POST 请求，把 fd 对象发送给服务器

axios.post('http://www.liulongbin.top:3009/api/upload/avatar', fd).then(({ data: res }) => {

// 2. 如果业务状态码等于 200，证明头像上传成功

if (res.code === 200) {

// 3. 为头像的 img 设置 src 地址

$('.thumb').attr('src', 'http://www.liulongbin.top:3009' + res.url)

}

})

}

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

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

jquery.cuishifeng.cn/click.html

// 模拟“文件选择器”的点击事件

$('#btnChoose').on('click', function () {

// 获取到文件选择器的 jQuery 对象，并调用其原型上的 click 方法

$('#iptFile').click()

})

总结

掌握如何使用 axios 提交表单的数据
- 原则：表单只负责采集数据；axios 负责提交数据
- 使用 jQuery 的 serialize() 函数，可以快速获取到表单数据
- 配置请求根路径 axios.defaults.baseURL = ‘根路径’
掌握 axios 中拦截器的基本用法
- 请求拦截器 & 响应拦截器
- 参考 axios 的官方文档进行使用
掌握 FormData 对象的基本使用
- const fd = new FormData()
- fd.append(键, 值)

上一篇：轻松入门：在Java后端运用Httpclient进行HttpPost操作 - 包括表单提交、文件上传及Json数据传输

下一篇：入门级前端知识：探索HTTP协议与HTML表单操作

玩转表格提交：基础form表单操作、Ajax提交数据实例、Axios拦截器功能以及文件上传实战指南

1. form表单的基本使用

1.1 什么是表单

1.2 表单的组成部分

1.3 <form>标签的属性

1. action

2. target

3. method

4. enctype

1.4 表单的同步提交及缺点

1. 什么是表单的同步提交

2. 表单同步提交的缺点

3. 如何解决表单同步提交的缺点

2. 通过Ajax提交表单数据

2.1 监听表单提交事件

2.2 阻止表单默认提交行为

2.3 快速获取表单中的数据

1. serialize()函数

2. serialize()函数示例

3. serialize() 函数的使用注意点

2.4 通过 Ajax 提交表单数据

总结

① form 表单的作用是什么？

② 采集到的表单数据，是否需要提交给服务器？

③ 把表单采集到的数据提交给服务器时，是否需要指定请求的方式与请求的 URL 地址？

2.5 axios 请求方法的别名

什么是请求方法的别名

体验 axios.get() 的用法

体验 axios.post() 的用法

2.6全局配置请求根路径

全局配置请求根路径 - 语法格式

案例 - 图书管理

案例效果

核心实现步骤：

3. axios 拦截器

什么是拦截器

不使用拦截器 - 实现 loading 效果

使用拦截器 - 实现 loading 效果

在响应拦截器中隐藏 loading 效果：

4. 文件上传

FormData

FormData 的基本用法

发送普通的 FormData 数据

结合 FormData 实现头像上传

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

头像上传 - 封装 uploadAvatar 函数

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

总结

玩转表格提交：基础form表单操作、Ajax提交数据实例、Axios拦截器功能以及文件上传实战指南

1.3 `<form>`标签的属性