1. link-to
- notion: https://zxdfe.notion.site/Ajax-day02-49929d4bb4f242b18fdde1afb569eba9
- Code-Share地址 :
git clone git@gitee.com:vrfe/code-share-28.git
- 接口文档:https://apifox.com/apidoc/shared-fa9274ac-362e-4905-806b-6135df6aa90e/api-25027790
- axios官网:https://www.axios-http.cn/docs/req_config
- axios线上地址
javascript
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
01 axios-config
javascript
<h2>axios-config模式</h2>
<button class="get">axios-get请求</button>
<button class="post">axios-post请求</button>
<script src="./lib/axios.js"></script>
<script>
const api = 'http://ajax-api.itheima.net/api/robot'
const api_login = 'http://ajax-api.itheima.net/api/login'
// 1. 测试get请求
const getBtn = document.querySelector('.get')
getBtn.addEventListener('click', function(){
axios({
url:api,
method:'GET',
params: {
spoken:'听我说谢谢你'
}
}).then(res => {
console.log(res)
})
})
// 2. 测试post请求
const postBtn = document.querySelector('.post')
postBtn.addEventListener('click', function(){
axios({
url:api_login,
method:'post',
data:{
username:'admin',
password:'123456'
}
}).then(res => {
console.log(res)
})
})
// 3. 总结
axios({
url:'地址',
method:'请求方法',
params:{get参数},
data:{post参数}
}).then(res => {})
</script>
02 英雄百科作业
- 防抖的形式
javascript
const debounce = (fn, ms) => {
let timerId
return function(...args){
clearTimeout(timerId)
timerId = setTimeout(() => {
fn.call(this, ...args)
}, ms)
}
}
const cb = function(){
getHero(ipt.value)
}
ipt.addEventListener('keyup', debounce(cb, 500))
04- form表单原始的方式
javascript
<!-- 表单上可以写method -->
<form action="http://ajax-api.itheima.net/api/data" method="post">
<!-- name属性加上之后,就可以设置属性名 -->
<input name="username" type="text" placeholder="请输入用户名" />
<input name="food" type="text" placeholder="请输入喜欢的食物" />
<input name="sign" type="textarea" placeholder="请输入个性签名" />
<!-- 表单里面,按钮,如果不写type,默认是type是submit -->
<button>提交</button>
</form>
<script>
// const form = document.querySelector('form')
// form.addEventListener('submit', function(e){
// e.preventDefault()
// })
</script>
05- form-ajax提交数据
javascript
<script src="./lib/axios.js"></script>
<script>
// 1. 如果是按钮提交表单
// 如果按钮没有加type, 要用ajax提交数据的话,先阻止
const btn = document.querySelector('button')
// btn.addEventListener('click', function(e){
// e.preventDefault()
// })
// 2. 如果是form表单的submit
const form = document.querySelector('form')
// 属性选择器
const username = document.querySelector('[name="username"]')
const food = document.querySelector('[name="food"]')
const sign = document.querySelector('[name="sign"]')
form.addEventListener('submit', function(e){
e.preventDefault()
axios({
url:'http://ajax-api.itheima.net/api/data',
method: 'POST',
data:{
username:username.value,
food:food.value,
sign:sign.value
}
}).then(res => {
console.log(res)
})
})
</script>
06-form-serialize简化表单取值
javascript
const form = document.querySelector('form')
// 属性选择器
// const username = document.querySelector('[name="username"]')
// const food = document.querySelector('[name="food"]')
// const sign = document.querySelector('[name="sign"]')
form.addEventListener('submit', function(e){
e.preventDefault()
// 1. 返回字符串 key=value&key2=val2 不传参数,直接传入form表单元素
const data = serialize(form)
// console.log(data)
// 2. 传入一个hash:true
// const data = serialize(form, {hash:true})
// 属性名 : 就是name属性
// 属性值 : 表单的value值
axios({
url:'http://ajax-api.itheima.net/api/data',
method: 'POST',
// data:{
// username:username.value,
// food:food.value,
// sign:sign.value
// }
data
}).then(res => {
console.log(res)
})
})
07 form-data基本使用
form-data 传文件的时候使用
javascript
// 1. 实例化
const data = new FormData()
console.log(data)
// 2. append添加
data.append('name', '奥特曼')
data.append('skill', 'biubiubiu')
data.append('friend', '小怪兽')
console.log(data)
// 3. 获取查询 get
console.log(data.get('skill'))
08 input-type-file选择文件
javascript
<!--
1. type=file 选择文件
2. accept ==> 引导我们选择什么文件,接收的是image
-->
<input type="file" name="avatar" accept="image/*" multiple placeholder="请选择头像">
<script>
// document.querySelector('input').onchange = function(e){
// console.log('文件信息', e.target.files[0])
// }
const ipt = document.querySelector('input')
ipt.addEventListener('change', function(e){
// console.log('文件信息', )
// console.log(e)
console.log(e.target.files[0])
})
</script>
09-FormData头像上传
html
<h2>直接通过FormData</h2>
<!-- 注意,文件在input标签 -->
<input type="file" accept="image/*" >
<img src="" alt="" />
<button>上传</button>
javascript
// <script src="./lib/axios.js"></script>
const btn = document.querySelector('button')
const ipt = document.querySelector('input')
const img = document.querySelector('img')
const api = 'http://ajax-api.itheima.net/api/file'
btn.addEventListener('click', function(){
// e.target.files[0]
console.log(ipt.files[0])
// 1. 传文件,需要用到 FormData
const data = new FormData()
// data.append('avator', 文件)
data.append('avatar', ipt.files[0])
// 2. 发送请求
axios({
url:api,
method:'post',
data
}).then(res => {
console.log(res)
img.src = res.data.data.url
})
})
10 头像上传
javascript
<script>
const btn = document.querySelector('#btnChoose')
const ipt = document.querySelector('#iptFile')
const img = document.querySelector('.thumb')
btn.addEventListener('click', function(){
// 1. 点击按钮的时候,自动触发ipt的click事件
ipt.click()
})
// 2. 监听ipt的change事件
const api = 'http://ajax-api.itheima.net/api/file'
ipt.addEventListener('change', function(e){
// 得到选中的图片
// const file =
// console.log(e.target.files[0])
// console.log(ipt.files[0])
// console.log(this.files[0])
const data = new FormData()
data.append('avatar', ipt.files[0])
axios({
url:api,
method:'POST',
data
}).then(res => {
console.log(res)
img.src = res.data.data.url
}).catch(err => {
alert('请正确选择图片')
})
})
</script>
content-type
表示传输的数据格式
javascript
<h2>form-data</h2>
<input class="ipt" type="file" accept="image/*" />
<h2>application/json</h2>
<button class="json">测试登录接口</button>
<h2>urlencoded</h2>
<button class="urlencoded">测试urlencoded格式</button>
<script src="./lib/axios.js"></script>
<script>
// 1.测试formData
document.querySelector('.ipt').onchange = function (e) {
// 调用头像上传接口 提交图片
const data = new FormData()
data.append('avatar', e.target.files[0])
axios({
url: 'http://ajax-api.itheima.net/api/file',
method: 'post',
data: data,
}).then(res => {
console.log('res:', res)
})
}
// 2.测试application/json
document.querySelector('.json').onclick = function () {
axios
.post('http://ajax-api.itheima.net/api/login', {
username: 'admin',
password: '123456',
})
.then(res => {
console.log('res:', res)
})
}
// 3.测试 application/x-www-form-urlencoded
document.querySelector('.urlencoded').onclick = function () {
axios({
url: 'http://ajax-api.itheima.net/api/data',
method: 'post',
data: 'name=jack&age=18&friend=rose',
}).then(res => {
console.log('res:', res)
})
}
</script>
axios-基地址
javascript
<h2>axios-基地址</h2>
<button>发送请求</button>
<script src="./lib/axios.js"></script>
<script>
// 配置基地址
axios.defaults.baseURL='http://ajax-api.itheima.net'
const btn = document.querySelector('button')
btn.addEventListener('click', function(){
// 聊天接口
axios({
url:'/api/robot',
method:'get',
params:{
spoken:'你好吗,我不好'
}
}).then(res => {
console.log(res)
})
})
// 测试post请求
const postBtn = document.querySelector('.post')
postBtn.addEventListener('click', function(){
axios({
url:'/api/login',
// 如果还要单独的某个基地址,自己这个请求设置
baseURL:base2,
method:'post',
data:{
username:'admin',
password:'123456'
}
}).then(res => {
console.log(res)
})
})
</script>
图书管理列表渲染
javascript
// 1. 配置基地址
axios.defaults.baseURL = 'http://ajax-api.itheima.net'
// /api/books
// 2. 当所有资源加载完毕的时候,请求数据,渲染列表
window.addEventListener('load', function(){
getBooks()
})
// 3. 封装获取全部书籍的方法
const tbody = document.querySelector('tbody')
function getBooks(){
axios({
url:'/api/books',
// method:'get', // get是默认值,可以省略
}).then(res => {
console.log(res)
const htmlArr = res.data.data.map(el => {
const {id, bookname, createdAt, author, publisher, updatedAt} = el
return `
<tr>
<th scope="row">${id}</th>
<td>${bookname}</td>
<td>${author}</td>
<td>${publisher}</td>
<td>
<button type="button" class="btn btn-link btn-sm btn-delete">
删除
</button>
<button type="button" class="btn btn-link btn-sm btn-update">
编辑
</button>
</td>
</tr>
`
}) // end map
tbody.innerHTML = htmlArr.join('')
})
}
bootstrap
model : https://v5.bootcss.com/docs/components/modal/#live-demo
javascript
// 1. 自定义属性操作
// data开头都是自定义属性
// data-bs-toggle ==> 切换弹窗
// data-bs-target ==> 切换哪个弹窗
// data-bs-dismiss ===> 关掉弹窗
//
// 用js的方式操作model
// 实例化一个model对象,
const myModel = new bootstrap.Modal('#exampleModal')
// 调用js方法,show , hide 开启 关闭
setTimeout(() => {
myModel.show() // 开启
myModel.hide()
}, 3000);
添加图书
javascript
// 添加图书
const addModal = new bootstrap.Modal('#addModal')
const addForm = document.querySelector('#addForm')
const addBtn = document.querySelector('#addBtn')
// 点击确认的时候,将输入的内容发送给后端存起来
addBtn.addEventListener('click', function(){
// www-form-urlen
// 使用serialize ==> 快速获取表单元素的值
const data = serialize(addForm, {hash:true})
// console.log('data' , data)
axios({
url:'/api/books',
method:'POST',
data
}).then(res => {
// 如果请求成功了,应该把弹窗关掉,还要渲染更新数据
getBooks()
// 关掉弹窗
addModal.hide()
// 重置表单
addForm.reset()
})
})
删除功能
javascript
// 删除功能
tbody.addEventListener('click', function(e){
if (e.target.classList.contains('btn-delete')){
const id = e.target.dataset.id
axios({
url:`/api/books/${id}`,
method:'DELETE'
}).then(res => {
console.log(res)
alert('删除成功')
getBooks()
})
} // end if
})
编辑图书
javascript
// ==> 编辑图书
const editModal = new bootstrap.Modal('#editModal')
const editForm = document.querySelector('#editForm')
// 事件委托的方式给tbody绑定
tbody.addEventListener('click', function(e){
if (e.target.classList.contains('btn-update')){
axios({
url:`/api/books/${e.target.dataset.id}`,
}).then(({data:res}) => {
// 填充内容
// editForm.querySelector(`[name=author]`).value = res.data.author
// editForm.querySelector(`[name=bookname]`).value = res.data.bookname
// editForm.querySelector(`[name=publisher]`).value = res.data.publisher
// editForm.querySelector(`[name=id]`).value = res.data.id
for(let key in res.data){
editForm.querySelector(`[name=${key}]`).value = res.data[key]
}
})
editModal.show()
} // 处理编辑的逻辑
})
保存修改
javascript
// 保存
const editBtn = document.querySelector('#editBtn')
editBtn.addEventListener('click', function(){
// 获取表单元素的数据,发给后端
const data = serialize(editForm, {hash:true})
console.log(data)
axios({
url:`/api/books/${data.id}`,
method:'put',
data, // 别忘了参数data
}).then(res => {
console.log(res)
// 提示更新修改成功
alert(res.data.message)
// 关闭弹窗
editModel.hide()
// 更新数据
getBooks()
})
})