本文已参与「新人创作礼」活动， 一起开启掘金创作之路。
Ajax 提交表单数据
form表单
表单的作用就是收集数据,表单默认提交是submit,当我们提交表单会跳转和刷新页面,所以我们使用表单收集数据时需要阻止表单的默认行为
第一种方法
给表单注册submit事件,阻止默认行为
document.querySelector('form').addEventListener('submit',function(e){
e.preventDefault();
})
第二种方法
给按钮(表单中按钮默认是submit类型)注册点击事件,阻止默认行为
document.querySelector('input[type=submit]').addEventListener('click',function(e){
e.preventDefault();
})
使用jQuery中的serialize()快速收集表单数据
jqery简单了解
jqery是上个时代特别好用的一个第三方库,但是现在逐渐被淘汰了,它最出色的就是链式编程,非常简单方便,用了让人乐不思蜀,魂牵梦萦...(但是已经被淘汰了,主要学习用serialize()快速收集表单数据)
如果不使用serialize()的话,我们需要依次用dom获取各个表单的值,表单数据少了还好说,但多了就会特别繁琐,而serialize()可以帮我们快速收集表单的数据
注意:使用serialize()时,input必须加name
const form = document.querySelector('#addForm');
form.addEventListener('submit', function (e) {
e.preventDefault();
const data = $(this).serialize(); //其中$(this)相当于传入了form表单对象,然后调用serialize();
axios.post('/api/addbook', data).then(({ data: res }) => {
if (res.code != 201) return alert(res.msg);
});
} )
serialize()获取的值相当于格式是 'a=1&b=2' 这种类型的数据
axios请求别名(简单类型的axios请求)
在实际开发中，常用的 5 种请求方式分别是：
GET、POST、PUT、PATCH、DELETE
为了简化开发者的使用过程，axios 为所有支持的请求方法提供了别名：
laxios.get(url[, config])
laxios.delete(url[, config])
laxios.post(url[, data[, config]])
laxios.put(url[, data[, config]])
laxios.patch(url[, data[, config]])
get请求
axios.get(
'http://www.liulongbin.top:3009/api/getbooks',
{
//第一个大括号表示配置信息,配置信息中有params
//然后配置信息中的params在加一个大括号代表params的值
params:{
id:1,
}
}
).then((res)=>{
console.log(res);
});
post请求
axios.post(
'http://www.liulongbin.top:3009/api/addbook',
{
bookname: '打哈偶的哈',
author: '哈哈哈哈',
publisher: '哈哈哈哈'
},
{
params:{
id:1
}
}
).then(({ data: res }) => {
console.log(res);
});
其中get和delete相似,post和put,parch相似
全局配置请求根路径
在 url 地址中，协议://域名:端口 对应的部分叫做“请求根路径”。
全局配置请求根路径的好处：提高项目的可维护性。
基于 axios 提供的固定配置，即可轻松配置请求的根路径。语法格式如下：
axios.defaults.baseURL = '请求根路径'
**axios.defaults.baseURL = "http://www.liulongbin.top:3009";
当我们配置完全局配置请求根路径后,我们写url只用写对应请求URL,请求根路径会自动加在url前面
axios拦截器
拦截器（interceptors）用来全局拦截 axios 的每一次请求与响应。
好处：可以把每个请求中，某些重复性的业务代码封装到拦截器中，提高代码的复用性。
使用场景:为每一次请求分别展示和隐藏loading(加载)效果
//拦截器代码直接在axios官方文档搜索复制来用就可以哈哈哈
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
文件上传
FormData
概念：FormData 是浏览器提供的一个 WebAPI，它以键值对的方式存储数据。
作用：FormData 配合 Ajax 技术，能够向服务器发送 multipart/form-data 格式的请求体数据。
典型应用场景：FormData + Ajax 技术实现文件上传的功能。
注意：Ajax 实现文件上传的时候，请求体的编码格式必须是 multipart/form-data。
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， 值是文件类型
1.基于form对象创建FormData实例对象
document.querySelector('form').addEventListener('submit', function (e) {
e.preventDefault();
//1.基于form对象创建FormData实例对象
const form = document.querySelector('form');
const fd = new FormData(form);
console.log(...fd);
});
注意想要打印fd对象必须使用扩展运算符...才能看得到它的值
2.创建空白的FormData对象,添加数据以append方法添加数据
const fd2 = new FormData();
fd2.append('aaa',document.querySelector('input[type="file"]').files[0]);
//传入的是 file上传的文件
console.log(...fd2);
input表单中file类型上传的文件存储是以伪数组的形式存储
默认只能上传单个文件
上传多个文件需要在input里面加上 multiple
实现头像上传
主要的实现步骤：
①使用文件选择器选择图片文件
②把用户选择的文件存入 FormData 对象
③使用 axios 把 FormData 发送给服务器
④模拟文件选择器的点击事件
<style>
.thumb-box {
text-align: center;
margin-top: 50px;
}
.thumb {
width: 250px;
height: 250px;
object-fit: cover;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="thumb-box">
<!-- 头像 -->
<img src="./images/cover.jpg" class="img-thumbnail thumb" alt="">
<div class="mt-2">
<!-- 文件选择框 -->
<!-- accept 属性表示可选择的文件类型 -->
<!-- image/* 表示只允许选择图片类型的文件 -->
<input type="file" id="iptFile" accept="image/*" style="display: none;">
<!-- 选择头像图片的按钮 -->
<button class="btn btn-primary" id="btnChoose">选择 & 上传图片</button>
</div>
</div>
<!-- 记得导入axios.js -->
<script src="./lib/jquery-v3.6.0.js"></script>
<script src="./lib/axios.js"></script>
<script>
axios.defaults.baseURL= 'http://www.liulongbin.top:3009';
const file = document.querySelector('input[type=file]');
document.querySelector('#btnChoose').addEventListener('click', function (e) {
file.click();
})
file.onchange = function () {
let fd = new FormData();
fd.append('file', file.files[0]);
console.log(fd.get('file'));
axios.post('/api/upload/avatar',fd).then(({data:res})=>{
if(res.code != 200) return alert(res.message);
console.log(res);
// axios.get('/api/get').then(({data:res})=>{
// console.log(res);
// })
document.querySelector('.img-thumbnail').src = axios.defaults.baseURL +res.url;
});
}
</script>
