ajax关于axios库的运用小案例

AJAX案例

图书管理

四大功能：

1. 展示图书
2. 删除图书
3. 编辑图书信息
4. 新增图书

步骤

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.渲染数据

图片上传

步骤：

1. 获取图片文件
   • 为input绑定change事件
2. 使用FormData携带图片文件 – 由于传到服务器的数据需要是form-data，所以需要进行转换，而img为服务器接口指定的参数名
3. 提交到服务器，获取图片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;})})

网页背景更换

步骤：

1. 选择图片上传，获取文件数据，并转换为表单数据格式
2. 提交到服务器，并获取返回的url地址，赋值给body的背景图style
3. 将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})`); //逻辑与的优先级高于“=” 

个人信息

步骤

1. 信息渲染

   • 向服务器获取对应个人的信息

   • 根据服务器所给的数据与表单元素进行对比，将数据进行渲染

     每次网页运行都调用一次渲染函数，从服务器获取数据并将数据渲染到对应标签中

2. 头像修改

   • 绑定change事件
   • 由于服务器要求，将文件数据和外号都追加到一个新建的表单数据中
   • 向服务器进行提交
   • 获取url网址,对头像的src重新进行赋值

3. 表单修改

   • 为表单提交按钮绑定点击事件
   • 通过serialize快速获得表单信息
   • 根据服务器添加外号属性
   • 由于服务器要求的gender需要是数字型，因此进行修改
   • 将修改的表单数据提交到服务器
   • 重新调用渲染函数

4. 操作成功提示

   • 获取提示框标签，并使用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();})
})