Ajax(二)

表单

主要作用：

负责数据的采集功能。

三个组成部分

1. 表单标签
   • 它是一个容器，用来将页面上指定的区域划定为表单区域
2. 表单域
   • 提供了采集用户信息的渠道。
   • 常见的表单域有：input、textarea、select 等。
   • 注意：每个表单域必须包含 name 属性，否则用户填写的信息无法被采集到
3. 表单按钮
   • 当表单数据填写完毕后，用户点击表单按钮，会触发表单的提交操作，从而把采集到的数据提交给服务器。
   • 注意：
     ① type=“submit” 表示提交按钮的意思
     ② type 属性的默认值就是 submit，因此 type=“submit” 可以省略不写

标签的属性

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

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

提交表单数据

在提交数据时，页面会自动跳转，导致用户体验感差。因为表单身兼数职：

• 负责采集数据
• 负责把数据提交到服务器
  • 表单的默认提交行为会导致页面的跳转。

1. 以GET方式提交表单数据

在 标签上，通过 action 属性指定提交的 URL 地址，通过 method 属性指定提交的方式为 GET

<form action="接口/api/form" method="get">
    <div>
      <!-- 用户名 -->
      <span>用户名：</span>
      <input type="text" name="username" >
    </div>
    <div>
      <!-- 密码： -->
      <span>登录密码：</span>
      <input type="password" name="password">
    </div>
    <div>
      <!-- 提交按钮 -->
      <button>提交</button>
    </div>
  </form>

2. 以POST方式提交表单数据

enctype的三种属性值之间的区别：

属性值	应用场景
application/x-www-form-urlencoded	表单中不包含文件上传的场景，适用于普通数据的提交
multipart/form-data	适合用于上传文件 ajax2.0提供的FormData来实现
text/plain	纯文本（不经常使用）

在标签上，通过 action 属性指定提交的 URL 地址，通过 method 属性指定提交的方式为 POST，并通过enctype 属性指定数据的编码方式为 application/x-www-form-urlencoded

<form action="http://www.liulongbin.top:3009/api/form" method="post" enctype="application/x-www-form-urlencoded">
    <div>
      <!-- 用户名 -->
      <span>用户名：</span>
      <input type="text" name="username">
    </div>
    <div>
      <!-- 密码： -->
      <span>登录密码：</span>
      <input type="password" name="password">
    </div>
    <div>
      <!-- 提交按钮 -->
      <button>提交</button>
    </div>
  </form>

使用Ajax解决页面跳转问题

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

步骤

1. 给form注册submit事件 ==> 该事件会在表单提交的时候会触发
2. 阻止表单的默认跳转行为 ==> 事件对象e.preventDefault()
3. 收集表单中数据
4. 发送ajax请求提交给服务器

document.querySelector('form').addEventListener('submit', function (e) {
      e.preventDefault()
      let username = qs('input[name=username]').value
      let password = qs('input[name=password]').value
      console.log(username, password)
      axios({
        method: 'post',
        url: '接口/api/form',
        data: {
          username,
          password
        }
      }).then(({ data: res }) => {
        console.log(res)
      })
    })

axios 请求方法的别名

在实际开发中，常用的 5 种请求方式分别是：
GET、POST、PUT、PATCH、DELETE
为了简化开发者的使用过程，axios 为所有支持的请求方法提供了别名：

axios.请求方式(请求地址 , [可选的配置对象])

1. axios.get(url[, config])

2. axios.delete(url[, config])

3. axios.post(url[, data[, config]])

4. axios.put(url[, data[, config]])

5. axios.patch(url[, data[, config]])

体验：axios.get()

• 使用 axios.get() 可以方便快捷地发起 GET 请求

// 不带查询参数
    axios.get('接口').then(result => {
      console.log(result)
    })

    // 带查询参数
    axios.get('接口',{
      params:{
        name: 'Tricia',
        age: 18
      }
    }).then(result => {
      console.log(result)
    })

体验：axios.post()

		// 不带请求体数据
    axios.post('接口').then(result => {
      console.log(result)
    })
    // 带请求体数据
    axios.post('接口',{
      name: 'Tricia',
      age: 22
    }).then(result => {
      console.log(result)
    })

全局配置请求根路径

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

语法：

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

// 全局配置请求根路径：
    axios.defaults.baseURL = '接口'
    // 调用接口时，只需要提供具体的请求路径
    axios.get('/api/get').then(result => {
      console.log(result)  // GET请求成功
    })

axios拦截器

概念：

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

优点：

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

不使用拦截器

// 开启loading
    function showLoading() {
      qs('.loading-box').style.display = 'block'
    }
    // 隐藏loading
    function hideLoading() {
      qs('.loading-box').style.display = 'none'
    }

    qs("#btnGET").addEventListener('click', function () {
      // 监听到按钮事件点击了（接口发送之前），开启loading
      showLoading()
      axios.get('/api/get').then(({ data: res }) => {
        // 请求成功了，关闭loading
        hideLoading()
      }).catch(e => {
        // 请求失败了，也需要关闭loading
        hideLoading()
      })
    })

使用拦截器

function showLoading() {
      qs('.loading-box').style.display = 'block'
    }
    function hideLoading() {
      qs('.loading-box').style.display = 'none'
    }
    // 添加请求拦截器
    axios.interceptors.request.use(function (config) {
      // 在发送请求之前做些什么 （开启loading）
      showLoading()
      return config
    },function(error) {
      return Promise.reject(error)
    })
    // 添加响应拦截器
    axios.interceptors.response.use(function (config) {
      // 请求成功了，关闭loading
      hideLoading()
      return response
    },function(error) {
      return Promise.reject(error)
    })
    qs("#btnGET").addEventListener('click', function () {
      axios.get('/api/get').then(({ data: res }) => {
        console.log(res)
      })
    })

效果

文件上传

FormData()

概念：

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

作用：

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

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

基本用法：

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

例如：

const fd = new FormData() // 创建一个空白的 FormData 对象，里面没有包含任何数据

调用 FormData 对象的 append(键, 值) 方法，可以向空白的 FormData 中追加键值对数据

fd.append('username' , 'admin')

注意:

• 键表示数据项的名字，必须是字符串
• 值表示数据项的值，可以是任意类型的数据

发送普通的FormData()数据

// 使用FormData() 提交普通数据  FormData() 是一个构造函数
    axios.defaults.baseURL = '接口'
    // 1. 初始化一个实例
    let fd = new FormData()
    // 2. 往fd实例里面添加数据
    fd.append('username' , 'Tricia')
    fd.append('age' , 18)
    // 3. 使用axios发起一个请求
    axios.post('/api/formdata' , fd).then(({data:res}) => {
      console.log(res)
    })

上传文件数据

// 声明一个函数，把图片上传之后并且展示到页面
    function uploadAvatar(file) {
      // 使用FormData() 格式存储文件
      let fd = new FormData()
      fd.append('avatar', file)
      // 发送请求
      axios.post('接口/api/upload/avatar', fd).then(({ data: {code,url} }) => {
        if (code === 200) {
          // 如果请求成功，修改图片文件的路径
          qs('.thumb').src = `接口${url}`
        }
      })
	    }