ajax访问数据失败--排查方法
1. 打开network面板，点击错误的内容
2. 查看 Headers （标头）当前请求是否成功的发起，如果请求链接是红色，一定是请求的地址出错
3. 查看 Headers （标头）请求的url是否正确，method是否正确
4. 查看 Paylod （载荷）是否按文档接口的要求传递了参数，同时参数的值或长度是否合理
5. 查看 Preview （预览）里面有没有提示 缺失一些必填的属性值、值是否合理
6. 查看 Response（响应）后台接口的返回数据
form 表单
表单由按个部分组成
常见的表单域：input 、textarea 、select等
1. type = 'submit' 表示提交按钮
2. 由于type属性的默认值是 submit 因此 type = 'submit' 可以省略不写
表单提交的问题：表单的默认提交行为会导致页面跳转
解决方案：
- 《form》 表单负责采集数据
- Ajax 负责将数据提交到服务器
axios所支持的参数格式有：
对象： {key = value,key = value} axiox内部会就行转换为 key=value&key=value
字符串： key=value&key=value&key=value.......
formdata： new Formdata
获取表单元素的方法
1.一个一个的获取
缺点：太过繁琐，获取多个不建议采用这种方式
<script>
// 属性选择器：querySelector('元素？[属性=值]')
let bookname = document.querySelector('[name=bookname]')
let author = document.querySelector('[name=author]')
let publisher = document.querySelector('[name=publisher]')
let btnadd = document.querySelector('.btnadd')
btnadd.addEventListener('click', function (e) {
// 按钮里的type='submit'有默认提交，所以阻止默认行为
e.preventDefault()
// 收集数据
let data = {
bookname: bookname.value,
author: author.value,
publisher: publisher.value
}
//实现文件上传
axios({
url: 'http://www.itcbc.com:3006/api/addbook',
method: 'POST',
data: data
}).then(res => {
alert(res.data.message)
})
})
</script>
2.serialize 的说明
缺点：无法获取文件域的数据
语法：$('表单form的选择器').serialize()
//获取到的数据格式是： key=value&key=value&key=value.......--本质是字符串
$('#addForm').serialize():可以一次性的获取到 当前id为addForm的 form中所有拥有name属性的表单元素的value值
// 1.表单元素一定要有name属性，因为name‘属性的值’就是‘参数的键’，没有键不可能生成键值对
// 2.name属性的值不能随意设置，一定要参照后台接口文档的参数名称
文件上传的两种方式
第一种方式：一次性提交所有数据
- 缺点：如果文件数据的内存比较大的时候，可能会造成提交响应的延迟，不利于用户体验
第二种方式：用户选择完文件后，就立刻进行文件上传
- 优点：上传完，后台会生成文件的路径名（地址），特点：内存极小，路径名再和其他数据统一提交到后台。
3.FormData----以后就使用这种方法获取表单元素了
特点：将所有数据一起进行传递：包含表单的所有元素的数据
注意，传递数据给后台建议将formdata二进制格式 转换为对象格式
语法：let formdata = new FormDate(表单元素对象)
FormData:也可以获取指定表单中拥有name属性的表单元素的value值，生成一个formdata对象
例如：let form = document.querSelector('#addForm') -->表单元素对象
let formdata = new FormDate(form) -->二进制对象，不支持在控制台直接输出
我们axios 虽然可以将formdata传递给后台，但是，不是每个后台接口都会接受formdata数据，但是接口几乎都支持对象格式的参数传递，所以往往我们需要将formdata转换为 对象 再进行参数传递
let obj = {}
formdata.forEach(function (value, key) {
// console.log(value, key);
obj[key] = value
})
//实现文件上传
axios({
url: '/api/addbook',
method: 'post',
data: obj
}).then(res => {
console.log(res);
})
FormData 和 serialize 的区别
共同点：
- 都需要设置表单各项的name属性
- 都能快速收集表单数据
- 都能够获取到隐藏（）的值
- 都不能获取禁用状态（disabled）的值
不同点：
- FormData 属于原生（axios）的代码；serialiaze 是 jQuery封装的 方法
- FormData 可以收集文件域 （）的值，而serialize不能，如果有文件上传，必须使用FormData
- 得到的结果的数据类型不一样，FormData是二进制对象（object），而serialize是字符串（string）
文件上传
特点：将所有数据一起进行传递：包含表单的所有元素的数据
注意，上传文件数据不需要将formdata二进制格式 转换为对象格式
let iptFile = document.querySelector('#iptFile')
// 用户选择文件之后所触发的事件：change
iptFile.addEventListener('change', function () {
let form = document.querySelector('form')
let formdata = new FormData(form)
// console.log(formdata.get('avatar'));
axios({
url: '/api/formdata',
method: 'POST',
// formdata可以直接作为参数传递
data: formdata
}).then(res => {
console.log(res);
})
})
单独上传文件数据
特点：只希望传递文件数据
let iptFile = document.querySelector('#iptFile')
let form = document.querySelector('form')
iptFile.addEventListener('change', function () {
// let formdata = new FormData(form)
// formdata.forEach(function (value, key) {
// console.log(value, key);
// })
// 我们值希望传递文件数据：如何获取用户当前选择的文件数据呢？
// 1.files:获取当前用户所选择的文件列表，是个伪数组，里面存放着一个一个的文件对象，如果input里面有multiple属性，就可以选择多个文件上传了，默认只能选择上传一个
let myfile = iptFile.files[0]
// 2.只有faomdata才能收集文件数据
let formdata = new FormData()
// 3.将文件数据追加到formdata
formdata.append('avatar', myfile)
axios({
url: 'http://www.itcbc.com:3006/api/formdata',
method: 'POST',
// formdata可以直接作为参数传递
data: formdata
}).then(res => {
console.log(res);
})
})
本地预览上传的图片---createObjectURL()
获取用户当前选择的文件对象
let myfile = iptFile.files[0]
// console.log(myfile);
// createObjectURL():可以将你传入的文件对象数据存储到内存，并返回内存中的存储地址（路径）
let myurl = URL.createObjectURL(myfile)
thumb.src = myurl
FormData 的API方法
- append('key','value')----向对象中追加数据
- set('key','value')----修改对象中的数据
- delete('key')----从对象中删除数据
- get('key')----获取指定key的一项数据
- getAll('key')----获取指定key的全部数据
- forEach()----遍历对象中的数据
