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

1 . 表单提交数据

表单的作用

表单主要负责采集数据

表单的组成

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

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

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

表单标签最重要的 3 个属性分别是 actionmethodenctype

  • 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);
});

拦截器.png

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);
    });
})
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

疆子

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值