通过ajax提交表单采集到的数据步骤：
- 监听表单点击事件
- 阻止按钮默认的默认提交行为submit（button默认值是submit，会导致点一下页面闪一下，consile.log会出现一下又立刻消失）
- 基于axios发起请求
- 指定请求方式，请求地址
- 指定请求体数据
jQuery的serialize( )简介
jQuery的serialize( )函数能够一次性获取到表单中采集的数据，它的语法格式是$('表单元素选择器').serialize();，注意：使用serialize()函数快速获取表单数据时，必须为每个表单域添加name属性，否则获取不到，
jQuery特点：
-
由于该方法是jQuery封装的，使用时必须引入jQuery文件。
-
使用serialize()，各表单域必须有 name 属性
-
使用该方法得到的结果是一个查询字符串结果：
name=value&name=value -
该方法能够获取隐藏域的值
-
该方法不能得到禁用状态的值
-
该方法不能得到文件域中的文件学习，所以不能完成文件上传
jQuery使用案例：
// axios({ // url: 'url', // method: 'post', // data: $('#addForm').serialize() // }).then(result => { // console.log(result); // alert(result.data.message) // init() // }) //axios别名用法 axios.post("/api/接口", $('#addForm').serialize() ).then(result => { console.log(result); alert(result.data.message) init() })
axios的请求方法别名（简化方式）
axios.get(url,{params:{键:值}},config).then((参数)=>{函数体})axios.delete(url,{params:{键:值}},config).then((参数)=>{函数体})axios.post(url,{键:值},config).then((参数)=>{函数体})axios.put(url,{键:值},config).then((参数)=>{函数体})axios.patch(url,{键:值},config).then((参数)=>{函数体})
全局配置请求根路径
在URL中，协议://域名:端口对应的部分叫做“请求根路径”
全局配置请求根路径的好处：
- 提高项目可维护性，如果路径发生改变可以减少请求方式里URL的更新
语法是axios.defaults.baseURL='http://....'，通常放到root.js里然后做引入，当请求接口时就不用写根路径，URL里只要直接写'/api/接口'就行
拦截器
拦截器interceptors用来全局拦截axios的每一次请求和响应
好处：可以把每个请求中，某些重复的业务性代码封装到拦截器中，提高复用性
例如使用拦截器实现加载中loading的效果：
//添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
//显示效果
loading.style.display = 'block'
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
//隐藏效果
loading.style.display = 'none'
return response;
}, function (error) {
// 对响应错误做点什么
//隐藏效果
loading.style.display = 'none'
return Promise.reject(error);
});
FormData介绍
FormData是一个浏览器对象，用于管理表单数据。IE10+支持；FormData的作用和jQuery中的serialize作用一样，用于快速收集表单数据。它会创建FormData会对象直接提交给接口。FormData+ajax技术可以实现文件上传功能。
//FormData使用步骤
//1.获取form标签的DOM对象
let form = document.querySelector('form')
//2.实例化FormData对象，传入form参数
let fd = new FormData(form)
//3.提交数据
//注意：提交的接口必须是接受FormData数据格式的，不然会报400错误，
//如果不接受可以把它转换成别的数据格式，例如遍历它的数据到空对象里，然后
//提交该对象。
axios.post('url',fd).then(resurl=>{console.log(result);})
FormData的API:
- delete ('key'); --向对象中删除数据
- append('key', 'value'); -- 向对象中追加数据
- set('key', 'value'); -- 修改对象中的数据
- get('key')；-- 获取指定key的一项数据
- getAll('key')；-- 获取指定key的全部数据
- forEach()；-- 遍历对象中的数据
-- 从对象中删除数据 -- 获取指定key的一项数据
-- 获取指定key的全部数据 -- 遍历对象中的数据
FormData和serialize的区别：
共同点:
- 都需要设置表单各项的name属性。
- 都能快速收集表单数据
- 都能够获取到隐藏域
(<input type="hidden" />)的值 - 都不能获取禁用状态(disabled)的值
不同点:
- FormData属于原生的代码;serialiaze是jQuery封装的方法
- FormData可以收集文件域
(<input type="file"/>)的值，而serialize不能。如果有文件上传，则必须使用FormData。 - 得到的结果的数据类型不一样(知道即可)
文件域
文件对象：
-
js中表示一个文件，也需要用到对象，也就是文件对象
-
文件对象，是本地文件得一个表示
-
文件对象不需要再见创建，可以通过文件域获取得到
- 选择一个或多个文件
- 根据文件域，找到它的files属性。files属性是一个伪数组，里面包含一个或多个文件对象。
文件对象作用：
-
本地预览和追加到FormData实现文件上传：
//获取提交文件按钮元素 let inputfile = document.querySelector('#iptFile') inputfile.addEventListener('change', function () { //获取第一个文件对象 let fileobj = inputfile.files[0] //创建formdata对象实例 let fd = new FormData() //创建本地文件得预览URL let photourl = URL.createObjectURL(fileobj) //使用formdata方法添加文件数据 fd.append('avatar', fileobj) //提交formdata文件数据到服务器 axios.post('url', fd).then(result => { //添加成功就把本地图片的src改为该文件的本地URL document.querySelector('.thumb').src = photourl console.log(result); }) })
\
