负责数据的采集功能。
属性 | 可选值 | 说明 |
---|---|---|
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 没有意义。
在提交数据时,页面会自动跳转,导致用户体验感差。因为表单身兼数职:
在 标签上,通过 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>
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 提交表单采集到的数据,可以防止表单默认提交行为导致的页面跳转问题,提高用户的体验。
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)
})
})
在实际开发中,常用的 5 种请求方式分别是: GET、POST、PUT、PATCH、DELETE 为了简化开发者的使用过程,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]])
// 不带查询参数
axios.get('接口').then(result => {
console.log(result)
})
// 带查询参数
axios.get('接口',{
params:{
name: 'Tricia',
age: 18
}
}).then(result => {
console.log(result)
})
// 不带请求体数据
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请求成功
})
拦截器(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() 是一个构造函数
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}`
}
})
}