Ajax 提交表单数据的用法-EW帮帮网

1.1 表单的组成

网页中采集数据的表单由三个部分组成，分别是：表单标签（form）、表单域（input、textarea、select）、表单按钮（submit或者reset）。

表单的作用就是收集数据。

1.2 表单的提交事件和阻止默认行为

$('form').on('submit', function (e) {
  e.preventDefault();

})

1.3 jQuery 的 serialize()函数

$('form').serialize() 获取到的form表单数据类型为 a=1&b=2&c=3 可以直接发送给服务器使用

axios({
    method: 'POST',
    url: 'http://www.liulongbin.top:3009/api/form',
    data: $('form').serialize() // 获取所有参数，类型： a=1&b=2&c=3
}).then(({ data: res }) => {
    console.log(res)
})

注意: 表单标签必须带有 name 属性；

1.4 axios请求方法别名

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

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

案例：图书管理案例。

2.axios 拦截器的用法

本章节讲解: axios 拦截器概念、axios 请求拦截器、axios 响应拦截器、loading效果

2.1 axios 拦截器

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

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

2.2 axios 请求拦截器

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

注意：一部分请求拦截器因为所有请求，无须逻辑判断，都要执行操作，所以记性了全局的 axios 默认值

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

2.3 axios 响应拦截器

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

案例: loading效果

3.文件上传

本章节讲解: FormData的概念、基本用法、发送普通的 FormData 数据、文件上传案例。

2.1 FormData的概念

概念：FormData 是浏览器提供的一个 WebAPI，它以键值对的方式存储数据。作用：FormData 配合 Ajax 技术，能够向服务器发送 multipart/form-data 格式的请求体数据。场景：FormData + Ajax 技术实现文件上传的功能。注意：Ajax 实现文件上传的时候，请求体的编码格式必须是 multipart/form-data。

2.2 基本用法

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

2.3 发送普通的 FormData 数据

// 创建
const fd = new FormData() ;
// 添加
fd.append('username', '张三') // 键是 username，值是字符串类型
fd.append('age', 20)         // 键是 age，           值是数字类型
fd.append('avatar', 图片文件)  // 键是 avatar，       值是文件类型
// 使用
$('#btn').on('click', function (){
    axios.post('http://www.liulongbin.top:3006/api/formdata', fd).then(({data: res}) => {
        console.log(res);
    });
})

Ajax 提交表单数据的用法