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

VUE 开发——AJAX学习（二）

news 2025/7/6 17:16:37

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

【磁盘】每天掌握一个Linux命令 - iostat

目录 【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景 注意事项 【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat&#xff08;I/O Statistics&#xff09;是Linux系统下用于监视系统输入输出设备和CPU使…...

编程新知 2025/6/21 8:10:07

Module Federation 和 Native Federation 的比较

前言 Module Federation 是 Webpack 5 引入的微前端架构方案&#xff0c;允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。 概念解析 Module Federation (模块联邦) Modul…...

编程新知 2025/7/5 3:39:28

【RockeMQ】第2节｜RocketMQ快速实战以及核⼼概念详解（二）

升级Dledger高可用集群 一、主从架构的不足与Dledger的定位 主从架构缺陷 数据备份依赖Slave节点&#xff0c;但无自动故障转移能力&#xff0c;Master宕机后需人工切换&#xff0c;期间消息可能无法读取。Slave仅存储数据&#xff0c;无法主动升级为Master响应请求&#xff…...

编程新知 2025/6/18 22:53:06

全志A40i android7.1 调试信息打印串口由uart0改为uart3

一&#xff0c;概述 1. 目的 将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本&#xff1a;2014.07&#xff1b; Kernel版本&#xff1a;Linux-3.10&#xff1b; 二&#xff0c;Uboot 1. sys_config.fex改动 使能uart3(TX:PH00 RX:PH01)&#xff0c;并让boo…...

编程新知 2025/7/4 18:32:13

Java多线程实现之Thread类深度解析

Java多线程实现之Thread类深度解析 一、多线程基础概念1.1 什么是线程1.2 多线程的优势1.3 Java多线程模型 二、Thread类的基本结构与构造函数2.1 Thread类的继承关系2.2 构造函数 三、创建和启动线程3.1 继承Thread类创建线程3.2 实现Runnable接口创建线程 四、Thread类的核心…...

编程新知 2025/6/27 3:48:34

AspectJ 在 Android 中的完整使用指南

一、环境配置&#xff08;Gradle 7.0 适配&#xff09; 1. 项目级 build.gradle // 注意&#xff1a;沪江插件已停更&#xff0c;推荐官方兼容方案 buildscript {dependencies {classpath org.aspectj:aspectjtools:1.9.9.1 // AspectJ 工具} } 2. 模块级 build.gradle plu…...

编程新知 2025/7/1 4:45:07

初学 pytest 记录

安装 pip install pytest用例可以是函数也可以是类中的方法 def test_func():print()class TestAdd: # def __init__(self): 在 pytest 中不可以使用__init__方法 # self.cc 12345 pytest.mark.api def test_str(self):res add(1, 2)assert res 12def test_int(self):r…...

编程新知 2025/7/6 14:53:36

深入浅出深度学习基础：从感知机到全连接神经网络的核心原理与应用

文章目录 前言一、感知机 (Perceptron)1.1 基础介绍1.1.1 感知机是什么&#xff1f;1.1.2 感知机的工作原理 1.2 感知机的简单应用&#xff1a;基本逻辑门1.2.1 逻辑与 (Logic AND)1.2.2 逻辑或 (Logic OR)1.2.3 逻辑与非 (Logic NAND) 1.3 感知机的实现1.3.1 简单实现 (基于阈…...

编程新知 2025/7/4 13:24:26

LabVIEW双光子成像系统技术

双光子成像技术的核心特性 双光子成像通过双低能量光子协同激发机制&#xff0c;展现出显著的技术优势&#xff1a; 深层组织穿透能力&#xff1a;适用于活体组织深度成像 高分辨率观测性能&#xff1a;满足微观结构的精细研究需求 低光毒性特点&#xff1a;减少对样本的损伤…...

编程新知 2025/7/6 0:34:23

python爬虫——气象数据爬取

一、导入库与全局配置 python 运行 import json import datetime import time import requests from sqlalchemy import create_engine import csv import pandas as pd作用&#xff1a; 引入数据解析、网络请求、时间处理、数据库操作等所需库。requests&#xff1a;发送 …...

编程新知 2025/7/5 10:35:20