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

VUE 开发——AJAX学习（二）

news 2026/2/7 19:08:44

一、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

基于FPGA的PID算法学习———实现PID比例控制算法

基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容&#xff1a;参考网站&#xff1a; PID算法控制 PID即&#xff1a;Proportional&#xff08;比例&#xff09;、Integral&#xff08;积分&…...

编程新知 2026/2/6 17:50:11

R语言AI模型部署方案：精准离线运行详解

R语言AI模型部署方案：精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案，实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点： 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...

编程新知 2025/12/6 1:56:35

解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八

现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet&#xff0c;点击确认后如下提示 最终上报fail 解决方法 内核升级导致&#xff0c;需要在新内核下重新下载编译安装 查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...

编程新知 2026/1/24 10:07:40

Nuxt.js 中的路由配置详解

Nuxt.js 通过其内置的路由系统简化了应用的路由配置&#xff0c;使得开发者可以轻松地管理页面导航和 URL 结构。路由配置主要涉及页面组件的组织、动态路由的设置以及路由元信息的配置。 自动路由生成 Nuxt.js 会根据 pages 目录下的文件结构自动生成路由配置。每个文件都会对…...

编程新知 2026/2/6 16:52:42

C++.OpenGL （10/64）基础光照（Basic Lighting）

基础光照（Basic Lighting） 冯氏光照模型（Phong Lighting Model） #mermaid-svg-GLdskXwWINxNGHso {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GLdskXwWINxNGHso .error-icon{fill:#552222;}#mermaid-svg-GLd…...

编程新知 2026/1/20 2:37:04

【Oracle】分区表

个人主页&#xff1a;Guiat 归属专栏&#xff1a;Oracle 文章目录 1. 分区表基础概述1.1 分区表的概念与优势1.2 分区类型概览1.3 分区表的工作原理 2. 范围分区 (RANGE Partitioning)2.1 基础范围分区2.1.1 按日期范围分区2.1.2 按数值范围分区 2.2 间隔分区 (INTERVAL Partit…...

编程新知 2026/1/20 21:59:36

MySQL 部分重点知识篇

一、数据库对象 1. 主键 定义 &#xff1a;主键是用于唯一标识表中每一行记录的字段或字段组合。它具有唯一性和非空性特点。 作用 &#xff1a;确保数据的完整性&#xff0c;便于数据的查询和管理。 示例 &#xff1a;在学生信息表中&#xff0c;学号可以作为主键&#xff…...

编程新知 2025/8/19 22:24:50

数学建模-滑翔伞伞翼面积的设计，运动状态计算和优化 ！

我们考虑滑翔伞的伞翼面积设计问题以及运动状态描述。滑翔伞的性能主要取决于伞翼面积、气动特性以及飞行员的重量。我们的目标是建立数学模型来描述滑翔伞的运动状态，并优化伞翼面积的设计。 一、问题分析 滑翔伞在飞行过程中受到重力、升力和阻力的作用。升力和阻力与伞翼面…...

编程新知 2026/2/6 5:55:05

SQL Server 触发器调用存储过程实现发送 HTTP 请求

文章目录 需求分析解决第 1 步：前置条件，启用 OLE 自动化方式 1：使用 SQL 实现启用 OLE 自动化方式 2：Sql Server 2005启动OLE自动化方式 3：Sql Server 2008启动OLE自动化第 2 步：创建存储过程第 3 步：创建触发器扩展 - 如何调试？第 1 步：登录 SQL Server 2008第 2 步…...

编程新知 2025/9/11 6:56:11

算术操作符与类型转换：从基础到精通

目录 前言&#xff1a;从基础到实践——探索运算符与类型转换的奥秘 算术操作符超级详解 算术操作符&#xff1a;、-、*、/、% 赋值操作符&#xff1a;和复合赋值 单⽬操作符&#xff1a;、--、、- 前言&#xff1a;从基础到实践——探索运算符与类型转换的奥秘 在先前的文…...

编程新知 2026/2/5 4:00:38