ajax关于axios库的运用小案例

devtools/2024/11/8 14:51:59/

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();})
})

http://www.ppmy.cn/devtools/132338.html

相关文章

【植物识别】Python+深度学习+人工智能+CNN卷积神经网络+算法模型训练+TensorFlow

【植物识别】Python+深度学习+人工智能+CNN卷积神经网络+算法模型训练+TensorFlow

一、介绍 植物识别系统&#xff0c;使用Python作为主要编程语言开发&#xff0c;通过收集常见的6中植物树叶&#xff08;‘广玉兰’, ‘杜鹃’, ‘梧桐’, ‘樟叶’, ‘芭蕉’, ‘银杏’&#xff09;图片作为数据集&#xff0c;然后使用TensorFlow搭建ResNet50算法网络模型&am…
阅读更多...
C# 都有哪些集合？

C# 都有哪些集合？

在 C# 中&#xff0c;集合&#xff08;Collection&#xff09;是用来存储一组数据的对象&#xff0c;通常是同一类型的数据。C# 提供了多种不同类型的集合&#xff0c;每种集合都有其独特的特点和用途。 常见的集合可以分为以下几类&#xff1a;数组、泛型集合、非泛型集合、其…
阅读更多...
人生的决策和算法学习有感

人生的决策和算法学习有感

我们做决策&#xff0c;是为了在运气面前获得更多主动权&#xff0c;而获得更多好运的方法&#xff0c;除了不断做出好的决策&#xff0c;还要让自己成为配得上这好运的人。 这种大局观体现为&#xff1a;要么是因为一个人一直很聪明地停留在自己有优势的领域&#xff0c;要么…
阅读更多...
STM32学习-段的概念_散列文件_重定位

STM32学习-段的概念_散列文件_重定位

使用keil烧写程序时&#xff0c;程序保存在哪里&#xff1f;这个问题很好想&#xff0c;当掉电时&#xff0c;RAM中的数据会被清除&#xff0c;所以程序数据只能保存在ROM区&#xff0c;对于STM32则是保存在内部的Flash中&#xff0c;那么程序运行是在ROM/Flash还是RAM呢&#…
阅读更多...
景联文科技专业数据标注公司：高质量数据标注推动AI产业发展

景联文科技专业数据标注公司：高质量数据标注推动AI产业发展

在当今数据驱动的时代&#xff0c;高质量的数据标注对于机器学习、自然语言处理&#xff08;NLP&#xff09;和计算机视觉等技术领域的发展起着至关重要的作用。 数据标注是指对原始数据进行处理&#xff0c;标记对象的特征&#xff0c;生成满足机器学习训练要求的可读数据编码…
阅读更多...
【算法】（Python）贪心算法

【算法】（Python）贪心算法

贪心算法&#xff1a; 又称贪婪算法&#xff0c;greedy algorithm。贪心地追求局部最优解&#xff0c;即每一步当前状态下最优选择。试图通过各局部最优解达到最终全局最优解。但不从整体最优上考虑&#xff0c;不一定全局最优解。步骤&#xff1a;从初始状态拆分成一步一步的…
阅读更多...
【Spring】更加简单的将对象存入Spring中并使用

【Spring】更加简单的将对象存入Spring中并使用

前言 本期讲解&#xff1a;通过Controller、Service、Repository、Component、Configurtion类注解、Bean方法注解&#xff0c;来更加简单的在Spring中存与读对象。 目录 1. 类注解 1.1 通过标签 1.2 使用类注解 1.3 什么是类注解 1.4 获取Bean对象命名问题 2. 方法注解 …
阅读更多...
Linux驱动开发——零散知识分享

Linux驱动开发——零散知识分享

本篇文章记录我学习Linux驱动时的一些零散知识&#xff0c;旨在记录成长&#xff0c;分享心得&#xff0c;希望我的分享能给你带来不一样的收获&#xff01; 1、C 语言字符串转换为整数二点函数atoi 在 C 语言中&#xff0c;atoi 函数用于将字符串转换为整数。其原型定义在头文…
阅读更多...
最新文章

Copyright @ 2022~2023