当前位置： 首页 > news >正文

VUE 开发——AJAX学习（二）

news 文章来源：https://blog.csdn.net/weixin_74113429/article/details/142523411 2024/11/17 6:38:30

一、Bootstrap弹框

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

步骤：

  1. 引入bootstrap.css和bootstrap.js
  2. 准备弹框标签，确认结构
  3. 通过自定义属性，控制弹框显示和隐藏

在<head>部分添加：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

在<body>结束前添加：

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> 

bootstrap的modal弹框：添加modal类名（默认隐藏） 

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8" /><title>title</title><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body><!-- 官网引入：https://v4.bootcss.com/docs/components/modal/ --><!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Launch demo modal</button><!-- Modal --><div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h5 class="modal-title" id="exampleModalLabel">Modal title</h5><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button></div><div class="modal-body">...</div><div class="modal-footer"><button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button><button type="button" class="btn btn-primary">Save changes</button></div></div></div></div><script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script><script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script></body>
</html>

 二、图片上传

  1. 获取图片文件对象
  2. 使用FormData携带图片文件
  3. 提交表单数据到服务器，使用图片url网址

三、 XMLHttpRequest

定义：XHR对象用于与服务器交互，在AJAX编程中被大量使用

步骤：

  1. 创建XHR对象
  2. 配置请求方法和请求URl地址
  3. 监听loadend事件，接收响应结果
<body><script>const xhr = new XMLHttpRequest()xhr.open('GET','http://hmajax.itheima.net/api/province')xhr.addEventListener('loadend',() => {console.log(xhr.response)//对响应结果做后续处理})xhr.send()</script>
</body>

四、认识Promise 

 Promise：用于表示一个异步操作的最终完成（或失败）及其结果值

成功和失败状态，可以关联对应处理程序

成功调用：resolve（值）触发then（）执行

失败调用：reject（值）触发catch（）执行

<script>/*** 使用Promise管理异步任务*/ //1.创建Promise对象const p = new Promise((resolve,reject) => {//2.执行异步代码setTimeout(() => {resolve('成功')},2000)})//3.获取结果p.then(result => {console.log(result)}).catch(error => {console.log(error)})</script>

五、Promise三种状态

一个Promise对象，必然处于以下几种状态之一：

待定（pending）：初始状态，既没有被兑现，也没有被拒绝

已兑现（fulfilled）：操作成功完成

已拒绝（rejected）：操作失败

Promise对象一旦被兑现/拒绝，就是已敲定，状态无法再被改变 

六、封装axios函数

<body><p class="my-p"></p><script>//1.定义myaxios函数，接收配置对象，返回Promise对象function myAxios(config) {return new Promise((resolve,reject) => {//2.发起xhr请求，默认请求方法为getconst xhr = new XMLHttpRequest()xhr.open(config.method || 'GET',config.url)xhr.addEventListener('loadend',() => {//3.调用成功/失败的处理程序if (xhr.status >= 200 && xhr.status < 300) {resolve(JSON.parse(xhr.response))} else {reject(new Error(xhr.response))}})xhr.send()})}//4.使用myaxios函数，获取省份列表展示myAxios({url: 'http://hmajax.itheima.net/api/province'//其他不写，对于上面的get}).then(result => {console.log(result)document.querySelector('.my-p').innerHTML = result.list.join('<br>')}).catch(error => {console.log(error)document.querySelector('.my-p').innerHTML = error.message})</script>
</body>

七、 同步代码和异步代码

同步代码：逐行执行，需原地等待结果后，才继续向下执行

异步代码：调用后耗时，不阻塞代码继续执行（不必原地等待），在将来完成后触发一个回调函数；例如setTimeout就是一个异步代码。

JS中的异步代码：

  • setTimeout/setInterval
  • 事件
  • AJAX

异步代码依靠回调函数接收结果

八、Promise——链式调用

使用then函数返回新Promise 对象特性，一直串联下去

相关文章：

VUE 开发——AJAX学习（二）

一、Bootstrap弹框 功能&#xff1a;不离开当前页面&#xff0c;显示单独内容&#xff0c;供用户操作 步骤&#xff1a; 引入bootstrap.css和bootstrap.js准备弹框标签&#xff0c;确认结构通过自定义属性&#xff0c;控制弹框显示和隐藏 在<head>部分添加&#xff1a…...

编程日记 2024/10/1 19:04:38

机器学习-KNN分类算法

1.1 KNN分类 KNN分类算法&#xff08;K-Nearest-Neighbors Classification&#xff09;&#xff0c;又叫K近邻算法。它是概念极其简单&#xff0c;而效果又很优秀的分类算法。1967年由Cover T和Hart P提出。 KNN分类算法的核心思想&#xff1a;如果一个样本在特征空间中的k个最…...

编程日记 2024/10/1 19:00:35

云计算 Cloud Computing

文章目录 1、云计算2、背景3、云计算的特点4、云计算的类型&#xff1a;按提供的服务划分5、云计算的类型&#xff1a;按部署的形式划分 1、云计算 定义&#xff1a; 云计算是一种按使用量付费的模式&#xff0c;这种模式提供可用的、便捷的、按需的网络访问&#xff0c;进入可…...

编程日记 2024/10/1 18:59:34

【算法】DFS 系列之 穷举/暴搜/深搜/回溯/剪枝（上篇）

【ps】本篇有 9 道 leetcode OJ。 目录 一、算法简介 二、相关例题 1&#xff09;全排列 .1- 题目解析 .2- 代码编写 2&#xff09;子集 .1- 题目解析 .2- 代码编写 3&#xff09;找出所有子集的异或总和再求和 .1- 题目解析 .2- 代码编写 4&#xff09;全排列 II…...

编程日记 2024/10/1 18:57:32

怎么绕开华为纯净模式安装软件

我是标题 众所周不知&#xff0c;华为鸿蒙系统自带纯净模式&#xff0c;而且 没法关闭 : ) 我反正没找到关闭键 以前或许会有提示&#xff0c;无视风险&#xff0c;“仍要安装”。但我这次遇到的问题是&#xff0c;根本没有这个选项&#xff0c;只有“应用市场”和“取消”&…...

编程日记 2024/10/1 18:53:29

CentOS7 离线部署docker和docker-compose环境

一、Docker 离线安装 1. 下载docker tar.gz包 下载地址&#xff1a; Index of linux/static/stable/x86_64/ 本文选择版本&#xff1a;23.0.6 2.创建docker.service文件 vi docker.service文件内容如下&#xff1a; [Unit] DescriptionDocker Application Container Engi…...

编程日记 2024/10/1 18:47:24

Vue 自定义组件实现 v-model 的几种方式

前言 在 Vue 中&#xff0c;v-model 是一个常用的指令&#xff0c;用于实现表单元素和组件之间的双向绑定。当我们使用原生的表单元素时&#xff0c;直接使用 v-model 是很方便的&#xff0c;但是对于自定义组件来说&#xff0c;要实现类似的双向绑定功能就需要一些额外的处理…...

编程日记 2024/10/1 18:43:20

Python Pandas数据处理效率提升指南

大家好&#xff0c;在数据分析中Pandas是Python中最常用的库之一&#xff0c;然而当处理大规模数据集时&#xff0c;Pandas的性能可能会受到限制&#xff0c;导致数据处理变得缓慢。为了提升Pandas的处理速度&#xff0c;可以采用多种优化策略&#xff0c;如数据类型优化、向量…...

编程日记 2024/10/1 18:41:18

最大正方形 Python题解

最大正方形 题目描述 在一个 n m n\times m nm 的只包含 0 0 0 和 1 1 1 的矩阵里找出一个不包含 0 0 0 的最大正方形&#xff0c;输出边长。 输入格式 输入文件第一行为两个整数 n , m ( 1 ≤ n , m ≤ 100 ) n,m(1\leq n,m\leq 100) n,m(1≤n,m≤100)&#xff0c;接…...

编程日记 2024/10/1 18:40:17

ubuntu中软件的进程管理-结束软件运行

在Ubuntu系统中&#xff0c;当某个运行中的软件无法正常退出时&#xff0c;可以通过以下几种方法强制结束该软件&#xff1a; 方法一&#xff1a;使用系统监视器&#xff08;System Monitor&#xff09;–小白专属 这个相当于win上的资源管理器 打开系统监视器 可以通过点击屏…...

编程日记 2024/10/1 18:36:14

Windows环境部署Oracle 11g

Windows环境部署Oracle 11g 1.安装包下载2. 解压安装包3. 数据库安装3.1 执行安装脚本3.2 电子邮件设置3.3 配置安装选项3.4 配置系统类3.5 选择数据库安装类型3.6 选择安装类型3.7 数据库配置3.8 确认安装信息3.9 设置口令 Oracle常用命令 2023年10月中旬就弄出大致的文章&…...

编程日记 2024/10/1 18:35:11

C语言进阶【8】--联合体和枚举（联合体和枚举这么好用，你不想了解一下吗？）

本章概述 联合体类型的声明联合体的特点联合体的大小的计算枚举类型的声明枚举类型的优点枚举类型的使用枚举类型的大小彩蛋时刻&#xff01;&#xff01;&#xff01; 联合体类型的声明 概述&#xff1a;联合体的关键字为 union。它的结构和结构体是一样的。进行展示&#xf…...

编程日记 2024/10/1 18:34:10

Android OTA升级

针对Android系统OTA升级&#xff0c;MTK平台有相关介绍文档&#xff1a;https://online.mediatek.com/apps/faq/detail?faqidFAQ27117&listSW 概念一&#xff1a;OTA包的构建 AOSP full build&#xff1a;Android原生提供的全量包的构建&#xff0c;意思就是可以从任何一…...

编程日记 2024/10/1 18:33:09

【项目经验分享】深度学习自然语言处理技术毕业设计项目案例定制

以下毕业设计是与深度学习自然语言处理&#xff08;NLP&#xff09;相关的毕业设计项目案例&#xff0c;涵盖文本分类、生成式模型、语义理解、机器翻译、对话系统、情感分析等多个领域&#xff1a; 实现案例截图&#xff1a; 基于深度学习的文本分类系统基于BERT的情感分析系…...

编程日记 2024/10/1 18:32:08

一觉醒来，YOLO11 冷不丁就来了

&#x1f947; 版权: 本文由【墨理学AI】原创首发、各位读者大大、敬请查阅、感谢三连 &#x1f389; 声明: 作为全网 AI 领域 干货最多的博主之一&#xff0c;❤️ 不负光阴不负卿 ❤️ 文章目录 前言&#xff1a;一觉醒来&#xff0c;YOLO11 冷不丁就来了ultralytics 版本更新…...

编程日记 2024/10/1 18:31:06

智能编辑器、版本控制与自动化脚本

在繁忙的工作中&#xff0c;每个开发者都渴望拥有一个“秘密武器”&#xff0c;帮助自己提升效率、减少错误&#xff0c;从而更快地完成任务。那么&#xff0c;在众多编程工具中&#xff0c;哪一款能够成为你的工作效率翻倍的“秘密武器”呢&#xff1f;本文将探讨智能的代码编…...

编程日记 2024/10/1 18:30:06

jenkinsfile实现镜像构建、发布

实现代码打包编译 容器镜像构建 jenkins编译采用docker构建。 遇到问题: 1.需要限制docker 容器的内存和cpu docker { image ‘ccr.ccs.tencentyun.com/libary/maven:3.6.3-jdk-8’ args “-v ${WORKSPACE}:/workspace --memory‘2048m’ --cpus‘1’” } 2.jenkins构建需要限制…...

编程日记 2024/10/1 18:29:04

OSPF路由计算

关于OSPF路由的基础概述可以看看这篇博客 动态路由---OSPF协议基础https://blog.csdn.net/ZZZCY2003/article/details/141335261 区域内路由计算 LSA概述 LSA是OSPF进行路由计算的关键依据OSPF的LSU报文可以携带多种不同类型的LSA各种类型的LSA拥有相同的报文头部 重要字段解…...

编程日记 2024/10/1 18:27:02

【设计模式-迭代】

定义 迭代器模式&#xff08;Iterator Pattern&#xff09;是一种行为型设计模式&#xff0c;用于提供一种顺序访问集合对象元素的方式&#xff0c;而不暴露该对象的内部表示。通过迭代器&#xff0c;客户端可以在不需要了解集合实现的细节的情况下遍历集合中的元素。 UML图 …...

编程日记 2024/10/1 18:25:01

k8s搭建双主的mysql8集群---无坑

《k8s搭建一主三从的mysql8集群---无坑-CSDN博客》通过搭建一主三从&#xff0c;我们能理解到主节点只有1个&#xff0c;那么承担增删改主要还是主节点&#xff0c;如果你在从节点上去操作增删改操作&#xff0c;数据不会同步到其他节点。本章我们将实现多主&#xff08;双主&a…...

编程日记 2024/10/1 18:23:59

Iterm2配置主题和Oh-My-Zsh

文章目录 一、配置主题1.1 安装使用git1.2 安装手册1.2.1 激活使用主题 二、配置oh-my-zsh2.1、oh-my-zsh插件2.2、oh-my-zsh主题 [Zsh](http://zsh.org/)2.2.1、Install using Git2.2.2、Install manually2.2.3、Activating theme2.2.4、Install using [zplug](https://github…...

编程日记 2024/10/1 18:22:59

html+css+js实现step进度条效果

实现效果 代码实现 HTML部分 <div class"box"><ul class"step"><li class"circle actives ">1</li><li class"circle">2</li><li class"circle">3</li><li class&quo…...

编程日记 2024/10/1 18:20:57

OpenCV视频I/O(8）视频采集类VideoCapture之从视频源中读取一帧图像函数read()的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 抓取、解码并返回下一个视频帧。 cv::VideoCapture::read() 是 VideoCapture 类的一个成员函数&#xff0c;用于从视频源中读取一帧图像. 该方法…...

编程日记 2024/10/1 18:18:54

深度学习500问——Chapter17：模型压缩及移动端部署（2）

文章目录 17.4.6 低秩分解 17.4.7 总体压缩效果评价指标有哪些 17.4.8 几种轻量化网络结构对比 17.4.9 网络压缩未来研究方向有哪些 17.5 目前有哪些深度学习模型优化加速方法 17.5.1 模型优化加速方法 17.5.2 TensorRT加速原理 17.5.3 TensorRT如何优化重构模型 17.5.4 Tensor…...

编程日记 2024/10/1 18:17:53

【C#】DllImport的使用

DllImport 是 C# 中用于从非托管 DLL&#xff08;动态链接库&#xff09;中导入函数的一个特性。这个特性允许你在 .NET 应用程序中调用由其他语言编写的函数&#xff0c;如 C 或 C。使用 DllImport 可以让你重用现有的非托管代码&#xff0c;而不需要重新实现这些功能。 下面…...

编程日记 2024/10/1 18:13:48

基于 Redis 实现滑动窗口的限流

⏳ 限流场景&#xff1a;突发流量&#xff0c;恶意流量&#xff0c;业务本身需要 基于 Redis 实现滑动窗口的限流是一种常见且高效的做法。Redis 是一种内存数据库&#xff0c;具有高性能和支持原子操作的特点&#xff0c;非常适合用来实现限流功能。下面是一个使用 Redis 实现…...

编程日记 2024/10/1 18:06:39

Camera Raw：打开图像

在图像工作流程中&#xff0c;无论是 Raw 格式图像文件还是 JPEG、TIFF 文件&#xff0c;都可以先使用 Camera Raw 打开并调整后&#xff0c;再进入其它 Adobe 软件如 Photoshop 中进行进一步的编辑和处理。 一、打开 Raw 格式图像 1、通过 Adobe Bridge 打开 在 Adobe Bridge …...

编程日记 2024/10/1 18:03:36

RK3588主板PCB设计学习（六）

可以在其它层对过孔进行削盘处理&#xff0c; 可以看到&#xff0c;这里有些过孔用不上&#xff0c;在这一层进行了削盘处理&#xff1a; 对于这种电源层进行铺铜操作的时候&#xff0c;如果不进行削盘处理的话这些焊盘可能导致这个电源层面不完整&#xff0c;存在割裂的风险&a…...

编程日记 2024/10/1 18:02:35

论文阅读（十一）：CBAM: Convolutional Block Attention Module

文章目录 IntroductionConvolutional Block Attention ModuleExperimentsConclusion 论文题目&#xff1a;CBAM: Convolutional Block Attention Module&#xff08;CBAM&#xff1a;卷积注意力机制&#xff09;   论文链接&#xff1a;点击跳转   代码链接&#xff1a;Git…...

编程日记 2024/10/1 18:01:34

【Kubernetes】常见面试题汇总（四十八）

目录 108.考虑一家拥有非常分散的系统的跨国公司&#xff0c;希望解决整体代码库问题。您认为公司如何解决他们的问题&#xff1f; 109.我们所有人都知道从单服务到微服务的转变从开发方面解决了问题&#xff0c;但在部署方面却增加了问题。公司如何解决部署方面的问题&#x…...

编程日记 2024/10/1 17:58:32

什么网站可以发布有偿做项目/连接友谊

iQQ 学习笔记声明本文仅供学习研究使用&#xff0c;不得用于任何非法及侵权用途。转贴请注明原发位置&#xff1a; http://xuekaiyuan.com/forum.php?modviewthread&tid6讨论请加QQ群&#xff1a;306320259iQQ 学习笔记3说明 &#xff1a;编写代码打包 Ant 脚本基于iQQ进行…...

编程日记 2024/11/17 5:18:48

drupal 网站实例/上海百度竞价托管

卡布列克数(Kaprekar number)是具有以下性质的数&#xff1a;对于某个正整数X {\displaystyle X}在n进位下存在正整数 A, B 及 m&#xff0c;且0 < B < b n {\displaystyle 0X 2 A n m B {\displaystyle X^{2}An^{m}B}X A B {\displaystyle XAB}简单的说&#xff0c;…...

编程日记 2024/11/17 4:48:14

前端开发线上培训/网站seo在线优化

2019独角兽企业重金招聘Python工程师标准>>> 1、连接MYSQL数据库代码 <?php $connecmysql_connect("localhost","root","root") or die("不能连接数据库服务器&#xff1a; ".mysql_error()); mysql_select_db("l…...

编程日记 2024/11/17 1:59:47

深圳品牌模板网站建设/哈尔滨新闻头条今日新闻

一、什么是跨域问题 当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域 如图&#xff1a;我们的vue前端项目的端口号为8081&#xff0c;ssm后端项目的端口号为8080&#xff0c;恭喜你出现跨域问题了&#xff01; 这时&#xff0c;我们可能会想到改…...

编程日记 2024/11/17 0:01:25

网站的二级目录是什么/汕头seo排名

1.安装依赖&#xff08;内网环境 挂载光盘&#xff09;本文链接原创&#xff1a; 我照着此文部署 yum -y install gcc gcc-c autoconf libjpeg libjpeg-devel libpng libpng-devel freetype freetype-devel libxml2 libxml2-devel zlib zlib-devel glibc glibc-devel glib2 gli…...

编程日记 2024/11/16 20:35:56

网站dns解析失败/代推广app下载

文章目录 本课题的研究内容：探地雷达原理探地雷达图像预处理图像倾斜矫正均值法去背景原理与实现图像分割技术阈值分割技术的实现腐蚀与膨胀技术探地雷达杂波抑制研究与实现探地雷达合成孔径成像探地雷达目标识别总结本文为论文解读，为2008年发布的基于传统图像处理与识别论文…...

编程日记 2024/11/16 14:17:45