day27--AJAX(bootstrap之modal,toast;接口文档的一些用法;AJAX原理)

目录

Bootstrap之Modal:

显示和隐藏方法

通过自定义属性:

使用JS来控制弹框:

Bootstrap之Toast:

接口文档一些用法:

删除图书:

图片上传:

图片上传步骤:

修改头像:

AJAX原理:

使用XHLHTTPREQUEST四步走:

XHLHTTPREQUEST--查询参数:

XHLHTTPREQUEST--请求参数:

Promise:

Promise三种状态:

封装简易axios

Bootstrap之Modal:

Modal 模态 (弹框)

功能:不离开当前页面,显示单独内容,供用户操作

<!-- 引入bootstrap.css -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- 引入bootstrap.js -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js"></script>

显示和隐藏方法

通过自定义属性:

查询Bootstrap官网可知,通过给按钮添加自定义属性即可实现弹框的显示和隐藏;

但是这种显示和隐藏就是单纯的点击就显示或者隐藏,不能有其他功能。要实现点击按钮执行了某些功能再显示或隐藏,需要用到JS来控制显示隐藏。

使用JS来控制弹框:

显示myModal.show()

隐藏myModal.hide()

Bootstrap之Toast:

显示与modal提示框一样,可以通过属性或者JS的方式来显示。

接口文档一些用法:

删除图书:

请求参数来路径上,路径上的是图书的id.

图片上传:

请求参数是form-data,需要借助JS内置构造函数FormData()

图片上传步骤:

1. 准备文件类型的input标签用来上传

2. 给文件绑定改变事件,即一旦有图片上传则会引起改变

在此点击事件中,找到图片专属的file对象这个在服务器中需要使用 ←  e.target.files[0] 

3. 创建图片专属的form-data

const fd = new FormData()
fd.append('img',e.target.files[0])

4. 上传至服务器,获取图片专属url:

axios({
url:'http://hmajax.itheima.net/api/uploadimg',
method:'POST',
data:fd
}).then((result)=>{
//图片的url
result.data.data.url
})

修改头像:

步骤:类似图片上传

文件选择元素 -> change事件 -> 获取头像file -> 创建头像fd(这里与图片不同 见下) ->拿到头像url->返回给头像标签

AJAX原理:

axios内部有XHR 前面就因为此而实现的交互,但是实际中可能只需要用到XHR这几行代码,这时候就不需要引入axios了

使用XHLHTTPREQUEST四步走:

axios 在返回的时候会把JSON字符串转成对象再进行返回,是因为内部有转换的代码,实际上拿到的xhr.response是JSON字符串。

XHLHTTPREQUEST--查询参数:

参数对象 →  查询对象 →  查询字符串

// 要查询的对象
const Obj = {
参数名1:值1,
参数名2:值2
}
// 1. 创建URLSearchParams对象,将要查询的对象转为→ url查询参数对象
const paramsObj = new URLSearchParams(Obj)
// 2. 生成指定格式查询参数字符串
const queryString = paramsObj.toString()   //结果: 参数名1=值1&参数名2=值2


XHLHTTPREQUEST--请求参数:

请求参数在请求体中

// 构造请求头
xhr.setRequestHeader('Content-Type','application/json')
// 由请求头可知,传入的请求体必须为JSON字符串,因此要准备请求体对象 → 请求体JSON字符串
// 由此也可知,为什么axios中只需要传入请求体对象,因为内部会将其转化为JSON字符串
const data = {
username:'lili',
password:888888
}
const userStr = JSON.stringify(user)
//发送请求体
xhr.send(userStr)

Promise:

表示一个管理异步操作最终状态和结果值的对象

//resolve(a) 会将a作为then(result=>{})中的result传递过去

//reject(a) 会将a作为catch(err=>{})中的err传递过去

eg:

 /*** 目标:使用Promise管理异步任务*/const p = new Promise((resolve, reject) => {// 执行异步任务//如果成功执行,则会调用resolve()函数,从而触发then()执行,//若失败则会调用reject()函数,从而触发catch()执行setTimeout(() => {// resolve('成功调用')reject(new Error('调用失败'))}, 2000)})console.log(p) //可以得到promise状态码p.then((result) => {console.log(result)}).catch((err) => {console.log(err)})
Promise三种状态:

Promise对象创建时,代码就会执行了,异步代码的fulfilled状态兑现(在执行resolve()时会兑现)则执行then();异步代码的rejected状态兑现(在执行reject()时会兑现)则执行catch()。

// 状态码一旦兑现(已拒绝或已兑现) 就不会改变

封装简易axios

 //  1. 定义myAxios函数,接收配置对象,返回Promise对象function myAxios(config) {return new Promise((resolve, reject) => {// 2. 发起XHR请求const xhr = new XMLHttpRequest()// 3. 判断有无params选项,携带查询参数// 此判断要写在url之前,因为会改变到url,使用URLSearchParams转换,转化为指定格式if (config.params) {const paramsObj = new URLSearchParams(config.params)const queryString = paramsObj.toString()// 创建完查询参数后,还需将其放入url中// 4.携带到url上config.url += `?${queryString}`}//默认请求方法为GETxhr.open(config.method || 'GET', config.url)xhr.addEventListener('loadend', () => {// 3. 调用成功/失败的处理程序vif (xhr.status >= 200 && xhr.status < 300) {resolve(JSON.parse(xhr.response))} else {reject(new Error(xhr.response))}})//  4. 判断有data选项,携带请求体if (config.data) {// 请求体转化为json字符串const jsonStr = JSON.stringify(config.data)// 设置请求头xhr.setRequestHeader('Content-Type', 'application/json')xhr.send(jsonStr)} else { xhr.send() }})}//调用document.querySelector('.reg-btn').addEventListener('click', () => {myAxios({url: 'http://hmajax.itheima.net/api/register',method: 'POST',data: {username: '你是我的小苹果oppp',password: '66668896'}}).then(result => {console.log(result)}).catch(err => {console.dir(err)})})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/157358.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【单片机】19-TFT彩屏

一、背景知识--显示器 1.什么是TFT &#xff08;1&#xff09;LCD显示器的构成&#xff1a;液晶面板驱动器【电压驱动】控制器【逻辑控制】 &#xff08;2&#xff09;液晶面板大致分为&#xff1a;TN&#xff0c;TFT&#xff0c;IPS等 &#xff08;3&#xff09;驱动器是跟随…

MS5611的ZYNQ驱动试验之一 分析

0&#xff0c;MS5611框图 1&#xff0c;原理图 项目需要用到MS5611气压计模块&#xff0c;原理图很简单明了&#xff0c;如下&#xff1a; 这里PS接GND是SPI接口模式&#xff0c;PS接VDD是I2C接口模式。我在设计原理图时候直接设置成了SPI模式&#xff0c;当然这个SPI不是纯粹意…

203、RabbitMQ 之 使用 direct 类型的 Exchange 实现 消息路由 (RoutingKey)

目录 ★ 使用direct实现消息路由代码演示这个情况二ConstantUtil 常量工具类ConnectionUtil 连接RabbitMQ的工具类Publisher 消息生产者测试消息生产者 Consumer01 消息消费者01测试消费者结果&#xff1a; Consumer02 消息消费者02测试消费者结果&#xff1a; 完整代码&#x…

代理和多级代理

文章目录 代理使用场景代理过程实验演示多级代理 代理使用场景 1、拿下远程 web 服务器 2、webshell 链接不稳定&#xff0c;需要使用稳定的木马程序 3、远程服务器无法直接链接攻击者电脑 4、需要借助公网vps转发来自失陷服务器的木马流量 5、借助frp服务端(vps)和客户端(内网…

实现Element Select选择器滚动加载

<template><el-selectpopper-class"more-tag-data"v-model"tagId"filterableplaceholder"请选择"focus"focusTag"><el-optionv-for"(item, index) in taskTagLists":key"index":label"item.n…

如何在小程序中设置导航栏文字颜色和背景颜色

不同商家有不同的颜色风格&#xff0c;例如有些做设计的公司&#xff0c;主要是黑色风格&#xff1b;有些卖珠宝的商家&#xff0c;主要是金色风格&#xff1b;他们的小程序&#xff0c;也需要进行同样的风格设定。下面具体介绍怎么在小程序中进行整个风格设定。 1. 在小程序管…

破局「二次创业」:合思的新解法

在新的水温下&#xff0c;寻找更为良性的发展正在成为企业的必答题。对此&#xff0c;合思给出的不仅是一份更“省”的答题方法。也更是从认知层到行动层&#xff0c;最后到工具层的一张授人以渔的“渔网”。 作者|思杭 编辑|皮爷 出品|产业家 今年4月初&#xff0c;广州…

lvgl 界面管理器

lv_scr_mgr lvgl 界面管理器 适配 lvgl 8.3 降低界面之间的耦合使用较小的内存&#xff0c;界面切换后会自动释放内存内存泄漏检测 使用方法 在lv_scr_mgr_port.h 中创建一个枚举&#xff0c;用于界面ID为每个界面创建一个页面管理器句柄将界面句柄添加到 lv_scr_mgr_por…

【基础篇】三、Flink集群角色、系统架构以及作业提交流程

文章目录 1、集群角色2、部署模式3、Flink系统架构3.1 作业管理器&#xff08;JobManager&#xff09;3.2 任务管理器&#xff08;TaskManager&#xff09; 4、独立部署会话模式下的作业提交流程5、Yarn部署的应用模式下作业提交流程 1、集群角色 Flink提交作业和执行任务&…

EXCEL——根据单元格值设置不同色阶

方法&#xff1a;开始—>条件格式—>色阶&#xff08;默认色阶或复杂色阶&#xff09;。 一、默认色阶 如图&#xff0c;可选择自定义的色阶模式。 二、复杂色阶 1、如图&#xff0c;点击"其他规则" 2、选择复杂格式 此时可以看到&#xff0c;支持多种格式…

有 AI,无障碍,AIoT 设备为视障人群提供便利

据世界卫生组织统计&#xff0c;全球共 22 亿人视力受损&#xff0c;包含 2.85 亿视障人群和 3,900 万全盲人群。而且&#xff0c;这一数字将随老龄化加剧不断增加。 虽然视障人群面临着诸多不便&#xff0c;但是针对视障人群的辅助设备却存在成本高、维护困难、操作复杂等问题…

给你一个项目,你将如何开展性能测试工作?

一、性能三连问 1、何时进行性能测试&#xff1f; 性能测试的工作是基于系统功能已经完备或者已经趋于完备之上的&#xff0c;在功能还不够完备的情况下没有多大的意义。因为后期功能完善上会对系统的性能有影响&#xff0c;过早进入性能测试会出现测试结果不准确、浪费测试资…

MQTT C库下载

方法一、从Eclipse paho下载 https://eclipse.dev/paho/index.php?pagedownloads.php 方法二&#xff0c;从MQTT官网下载 https://mqtt.org/software/ https://os.mbed.com/teams/mqtt/code/MQTTPacket/ MQTTPacket源码和paho下载的差不多 方法三、从Keil5 包管理工具…

centos7安装db2 version11.1

centos7安装DB2 操作系统 linux centos7 DB2版本 11.1 1、取包 IBM MRS Tool 将安装包放在 /home/software 下面 mkdir -p /home/software cd /home/software wget https://iwm.dhe.ibm.com/sdfdl/v2/regs2/db2pmopn/Express-C/DB2ExpressC11/Xa.2/Xb.aA_60_-i7wWKFMFpbW1xl1…

【数据结构】什么是线性表?

&#x1f984;个人主页:修修修也 &#x1f38f;所属专栏:数据结构 ⚙️操作环境:Visual Studio 2022 目录 线性表的定义 生活中常见的线性表 结语 线性表的定义 线性结构的特点: 在数据元素的非空有限集中: 存在唯一的一个被称作"第一个"的数据元素;存在唯一的一个…

10个打工人必备AI神器,升职加薪靠AI

HI&#xff0c;同学们&#xff0c;我是赤辰&#xff0c;本期是第18篇AI工具类教程&#xff0c;文章底部准备了粉丝福利&#xff0c;看完后可领取&#xff01;1. Runway&#xff08;文字转视频AI工具&#xff09; 只需要一句提示词就能精确生成你所想象的视频场景&#xff0c;还…

nnunetv2训练报错 ValueError: mmap length is greater than file size

目录 报错解决办法 报错 笔者在使用 nnunetv2 进行 KiTS19肾脏肿瘤分割实验的训练步骤中 使用 2d 和3d_lowres 训练都没有问题 nnUNetv2_train 40 2d 0nnUNetv2_train 40 3d_lowres 0但是使用 3d_cascade_fullres 和 3d_fullres 训练 nnUNetv2_train 40 3d_cascade_fullres …

Prometheus:优秀和强大的监控报警工具

文章目录 概述Prometheus的底层技术和原理数据模型数据采集数据存储查询语言数据可视化 Prometheus的部署Prometheus的使用配置数据采集目标查询监控数据设置警报规则 查看数据可视化总结 概述 Prometheus是一款开源的监控和警报工具&#xff0c;用于收集和存储系统和应用程序…

Xcode 14.3.1build 报错整理

1、Command PhaseScriptExecution failed with a nonzero exit code 2、In /Users/XX/XX/XX/fayuan-mediator-app-rn/ios/Pods/CocoaLibEvent/lib/libevent.a(buffer.o), building for iOS Simulator, but linking in object file built for iOS, file /Users/XX/XX/XX/fayuan…

软件设计之抽象工厂模式

抽象工厂模式指把一个产品变成一个接口&#xff0c;它的子产品作为接口的实现&#xff0c;所以还需要一个总抽象工厂和它的分抽象工厂。 下面我们用一个案例去说明抽象工厂模式。 在class中可以选择super类和medium类&#xff0c;即选择一个产品的子类。在type中可以选择产品的…