ajax关于axios库的运用小案例
AJAX案例
图书管理
四大功能：
- 展示图书
- 删除图书
- 编辑图书信息
- 新增图书
步骤
1.bootstrap弹窗来实现新增和编辑图书时出现的弹窗
有两种方案：
a.可以用自带的属性来进行弹窗的显示和隐藏
b.可以通过JS进行控制，此操作可以进行自定义，比如在隐藏窗口的同时获取表单元素，并进行渲染页面
a方案
在想要进行隐藏和显示的按钮中增加自带的属性
b方案
//1.创建弹窗对象
const box = document.querySelector('.name-box');
const modal = new bootstrap.Modal(box);
//2.绑定点击事件并调用相关显示和隐藏的函数
//2.1获取需要绑定点击事件的对象
document.querySelector('.edit-btn').addEventListener('click', () => {
modal.show();
})
document.querySelector('.save-btn').addEventListener('click', () => {
//获取表单信息并打印
const data = document.querySelector('.username').value;
console.log('username', data);
modal.hide();
})
2.渲染列表
a.获取数据
b.渲染数据
图片上传
步骤：
- 获取图片文件
- 为input绑定change事件
- 使用FormData携带图片文件 – 由于传到服务器的数据需要是form-data，所以需要进行转换，而img为服务器接口指定的参数名
- 提交到服务器，获取图片url网址使用
两个知识点：
- 获取input上传的文件数据：
e.target.files– 获取的是一个文件列表（伪数组），可以通过下标指定想要的数组 - 提交到服务器的数据需要是表单数据，则要通过FormData来实现对数据的包裹–
const filedata = new FormData(); filedata.append('img', e.target.files[0]);
代码
/**
* 目标：图片上传，显示到网页上
* 1. 获取图片文件
* 2. 使用 FormData 携带图片文件
* 3. 提交到服务器，获取图片url网址使用
*/
//1.1. 获取图片文件
//为input绑定change事件
document.querySelector('.upload').addEventListener('change', e => {
console.log(e.target.files[0]);
//1.2 使用 FormData 携带图片文件 -- 由于传到服务器的数据需要是form-data，所以需要进行转换，而img为服务器接口指定的参数名
const filedata = new FormData();
filedata.append('img', e.target.files[0]);
//1.3 提交到服务器，获取图片url网址使用
axios({
url: 'http://hmajax.itheima.net/api/uploadimg',
method: 'POST',
data: filedata
}).then(result => {
console.log(result);
const myimg = document.querySelector('.my-img');
const imgurl = result.data.data.url;
myimg.src = imgurl;
})
})
网页背景更换
步骤：
- 选择图片上传，获取文件数据，并转换为表单数据格式
- 提交到服务器，并获取返回的url地址，赋值给body的背景图style
- 将url地址存储到本地以便下次访问网站的时候可以对body的背景图style进行赋值（需要判断本地是否存储了数据）
代码
/**
* 目标：网站-更换背景
* 1. 选择图片上传，设置body背景
* 2. 上传成功时，"保存"图片url网址
* 3. 网页运行后，"获取"url网址使用
* */
//1.1为更换背景的表单元素绑定change事件
document.querySelector('.bg-ipt').addEventListener('change', e => {
console.log(e.target.files[0]);
//将文件数据追加到新建的formdata中
const Filedata = new FormData();
Filedata.append('img', e.target.files[0]);
//将该表单数据上传到服务器
axios({
url: 'http://hmajax.itheima.net/api/uploadimg',
method: 'POST',
data: Filedata
}).then(result => {
//获取返回的url地址
console.log(result.data.data.url);
//给body的背景图赋值
const imgUrl = result.data.data.url;
document.body.style.backgroundImage = `url(${imgUrl})`;
//将该url传入本地存储，以便刷新后依旧可以对body背景图进行赋值
localStorage.setItem('bgImg', imgUrl);
})
})
//网页运行后，通过本地存储进行背景图赋值，但是要注意第一次进入网站时没有设置背景图
const imgUrl = localStorage.getItem('bgImg');
console.log(imgUrl);
//判断是否存在imgUrl在进行赋值 通过逻辑与的逻辑中断特性
imgUrl && (document.body.style.backgroundImage = `url(${imgUrl})`); //逻辑与的优先级高于“=”
个人信息
步骤
-
信息渲染
-
向服务器获取对应个人的信息
-
根据服务器所给的数据与表单元素进行对比，将数据进行渲染
每次网页运行都调用一次渲染函数，从服务器获取数据并将数据渲染到对应标签中
-
-
头像修改
- 绑定change事件
- 由于服务器要求，将文件数据和外号都追加到一个新建的表单数据中
- 向服务器进行提交
- 获取url网址,对头像的src重新进行赋值
-
表单修改
- 为表单提交按钮绑定点击事件
- 通过serialize快速获得表单信息
- 根据服务器添加外号属性
- 由于服务器要求的gender需要是数字型，因此进行修改
- 将修改的表单数据提交到服务器
- 重新调用渲染函数
-
操作成功提示
- 获取提示框标签，并使用bootstrap内置的对象
- 调用show()方法
新的方法
提示框对象Toast，bootstrap中的一个对象，需要在标签中内置类名toast，并且引入bootstrap相关的JavaScript文件
语法：
//html中的提示框
<!-- toast 提示框 -->
<div class="toast my-toast" data-bs-delay="1500">
<div class="toast-body">
<div class="alert alert-success info-box">
操作成功
</div>
</div>
</div>
//js中的运用操作，何时调用show()方法
//获取提示框标签，并使用bootstrap内置的对象
const tiptoastDom = document.querySelector('.my-toast');
const tiptoast = new bootstrap.Toast(tiptoastDom);
//调用show()方法
tiptoast.show();
代码：
/**
* 目标1：信息渲染
* 1.1 获取用户的数据
* 1.2 回显数据到标签上
* */
//封装一个渲染函数，在运行的时候进行调用，以及修改头像或者表单元素内容的时候进行调用
//将外号作为一个常量进行声明，避免反复向服务器进行操作写错外号
const creator = '老吴';
function painthtml() {
//向服务器获取对应个人的信息
axios({
url: 'http://hmajax.itheima.net/api/settings',
method: 'GET',
params: {
creator
}
}).then(result => {
console.log(result.data.data);
//将数据进行渲染
const objData = result.data.data;
Object.keys(objData).forEach(key => {
//根据服务器所给的数据与表单元素进行对比
//如果当前的属性名为avatar，对头像的src属性进行赋值
if (key === 'avatar') {
document.querySelector('.prew').src = objData[key];
} else if (key === 'gender') {
//如果当前值为gender，对单选框进行赋值
//获取单选框对象
const whatGender = document.querySelectorAll('.gender');
//由于服务器给的规则是0男1女，刚好和下标位置相符，因此可以直接通过下标直接赋值
whatGender[objData[key]].checked = true;
} else {
//其他表单元素无需进行特殊操作，进行对其内容进行赋值
document.querySelector(`.${key}`).value = objData[key];
}
})
})
}
//每次网页运行都调用一次渲染函数，从服务器获取数据并将数据渲染到对应标签中
painthtml();
/**
* 目标2：头像切换
* 2.1 为对应表单元素绑定change事件
* 2.2 获取表单中的文件数据，并按服务器的格式将数据传给服务器
* 2.3 将返回的url地址赋值给对应的标签，进行赋值操作
* */
//绑定change事件
const imgFile = document.querySelector('.upload');
imgFile.addEventListener('change', e => {
console.log(e.target.files);
//由于服务器要求，将文件数据和外号都追加到一个新建的表单数据中
const formdata = new FormData();
formdata.append('avatar', e.target.files[0]);
formdata.append('creator', creator);
//向服务器进行提交
axios({
url: 'http://hmajax.itheima.net/api/avatar',
method: 'PUT',
data: formdata
}).then(result => {
//获取url网址
console.log(result.data.data.avatar);
document.querySelector('.prew').src = result.data.data.avatar;
})
})
//快速获取表单元素内容
// const form = document.querySelector('.user-form');
// const formdata = serialize(form, { hash: true, empty: true });
// const { avatar, desc, email, gender, nickname } = formdata; //对对象进行结构
/**
* 目标2：表单修改
* 2.1 为对应表单元素绑定change事件
* 2.2 获取表单中的文件数据，并按服务器的格式将数据传给服务器
* 2.3 将返回的url地址赋值给对应的标签，进行赋值操作
* */
//为表单提交按钮绑定点击事件
document.querySelector('.submit').addEventListener('click', () => {
//通过serialize快速获得表单信息
const form = document.querySelector('.user-form');
const formdata = serialize(form, { hash: true, empty: true });
//根据服务器添加外号属性
formdata.creator = creator;
//由于服务器要求的gender需要是数字型，因此进行修改
formdata.gender = +formdata.gender;
console.log(formdata);
//将修改的表单数据提交到服务器
axios({
url: 'http://hmajax.itheima.net/api/settings',
method: 'PUT',
data: formdata
}).then(result => {
console.log(result);
//目标4 提示框提示操作成功
//获取提示框标签，并使用bootstrap内置的对象
const tiptoastDom = document.querySelector('.my-toast');
const tiptoast = new bootstrap.Toast(tiptoastDom);
//调用show()方法
tiptoast.show();
//重新渲染页面
painthtml();
})
})