【前端知识点总结】Ajax篇 (二) Ajax 提交表单数据

1 . 表单提交数据

表单的作用

表单主要负责采集数据

表单的组成

网页中采集数据的表单由三个部分组成 :

• 表单标签（form）: 在页面上划定为表单区域
• 表单域（input、textarea、select）: 用户输入信息,并采集
  • 注意 ： 每个表单域必须包含 name 属性，否则用户输入的信息无法被采集
• 表单按钮（submit）: 用户点击表单按钮，会触发表单的提交操作，把采集到的数据提交给服务器。

<form> 表单标签的常用属性

表单标签最重要的 3 个属性分别是 action、method 和 enctype

• action = "接口的 url 地址" : 把表单采集到的数据，提交到哪儿
• method = "请求方式(GET、POST)" : 数据的请求方式（默认值为 GET）
• enctype = "数据的编码格式" : 把表单数据提交给服务器之前，如何对将要提交的数据进行编码（默认值 application/x-www-form-urlencoded）

注意 ：

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

    <form 
    action="https://www.juejin.cn:443/api/form" 
    method="POST" 
    enctype="application/x-www-form-urlencoded">
        用户名: <input type="text" name="username"> <br><br>
        密&emsp;码: <input type="text" name="password"> <br><br>
        <input type="submit">
    </form>    

enctype 三个可选值之间的区别

只有 method 属性的值等于 POST 时，才有必要设置 enctype 属性。

• application/x-www-form-urlencoded : 适用于普通数据的提交,不包含文件上传
• multipart/form-data : 上传文件
• text/plain : 不常用

表单提交数据的弊端

表单提交后，页面存在跳转的行为,用户无法停留在当前的页面，给用户的体验感很差。

弊端原因 :

• <form> 表单：既负责采集数据，又负责把数据提交到服务器,表单的默认提交行为会导致页面的跳转。

解决方法 ：

1. <form> 表单只负责采集数据
2. 利用 Ajax 将数据提交到服务器

2 . Ajax 提交表单数据

1. 阻止表单默认行为

阻止表单提交 : e.preventDefault()

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

2 . 通过 Ajax 提交表单数据

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

// 用 jQuery 辅助 $ jQuery 语法
axios({
    method: 'POST',
    url: '接口的 url 地址',
    data: {
      username: $('[name="username"]').val(),
      password: $('[name="password"]').val()
    }
  }).then(({ data: res }) => {
    console.log(res)
  })
})

3 . jQuery 的 serialize()函数

语法 : $('form').serialize()

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

axios({
    method: 'POST',
    url: '接口的 url 地址',
    data: $('form').serialize() // 获取所有参数，类型： a=1&b=2&c=3
}).then(({ data: res }) => {
    console.log(res)
})

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

3 . axios 拦截器的用法

1 . 什么是 axios 拦截器

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

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

axios 拦截器有两种 : 请求拦截器 和 响应拦截器

2 . axios 请求拦截器

就是在 axios 发送请求前做点什么

    // 请求拦截器 - 发送请求之后
    axios.interceptors.request.use(function (config) {
      // 在这里可以进行请求前做什么的操作
      
      // config里面存储的是所有请求的参数，使用完毕后，一定要返回
      return config;
    }, function (error) {
      // 固定写法
      return Promise.reject(error);
    })

3 . 请求拦截器的业务场景

全局配置请求根路径

• 在 url 地址中，协议://域名:端口 对应的部分叫做 “请求根路径”。
• 全局配置请求根路径的好处 ： 提高项目的可维护性(假设：端口号发生改变，则每个接口调用时的端口号都需要被修改)。
  语法 :
• axios.defaults.baseURL = '请求根路径';

全局配置 token 认证 (属于配置请求头)

token : 一般网站登录后就会携带 token ,用于认证是否登录

语法 :

• axios.defaults.headers.common['Authorization'] = token

全局配置请求格式 (属于配置请求头)

参数编码格式

语法 :
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'

3 . axios 响应拦截器

在用户收到数据前,做什么

业务场景 :

• 响应数据嵌套层数过多,可以在响应拦截器中解构并返回解构后的数据给用户
• 处理响应报错

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

4 . axios 请求方法别名

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

• axios.get(url,{params:{参数}})
• axios.delete(url,{参数})
• axios.post(url,{参数})
• axios.put(url,{参数})
• axios.patch(url{参数})
  get 请求

  // 1.无参类型
  axios.get('接口的 url 地址').then(result => {
      console.log(result.data);
  });

  // 2.带参类型
  axios.get('接口的 url 地址', {
      params: {
          username: 'xiangxiang',
          password: '123123'
      }
  }).then(result => {
      console.log(result.data);
  });

post 请求

   // post请求，要求全部携带参数
   axios.post('接口的 url 地址', {
       username: 'zhagnsan',
       password: '456456'
   }).then(result => {
       console.log(result.data);
   });

3 . FormData 文件上传

1 . FormData 的概念

概念 ： FormData 是浏览器提供的一个 WebAPI，它以键值对 ( "key = value" ) 的方式存储数据

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

业务场景 ： FormData + Ajax 技术实现文件上传的功能

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

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

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('接口的 url 地址', fd).then(({data: res}) => {
        console.log(res);
    });
})