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

AJAX三、XHR，基本使用，查询参数，数据提交，promise的三种状态，封装-简易axios-获取省份列表 / 获取地区列表 / 注册用户，天气预报

news 2025/11/6 13:07:12

一、XMLHttpRequest基本使用

XMLHttpRequest（XHR）对象用于与服务器交互。

二、XMLHttpRequest-查询参数

语法: 用 & 符号分隔的键/值对列表

三、XMLHttpRequest-数据提交

核心步骤 :

1. 请求头设置 Content-Type

2. 请求体携带符合要求的数据

四、Promise

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

概念: 管理异步操作的对象，可以获取成功（或失败）的结果

使用步骤:

1. 实例化Promise对象

2. 执行异步操作，并传递结果

3. 获取结果

五、Promise的三种状态

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

2. 已兑现（fullfilled） : 意味着操作成功完成

3. 已拒绝（rejected） : 意味着操作失败

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

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>认识-Promise</title>
</head><body><h2>认识-Promise</h2><script>/*** Promise*  浏览器的内置对象，管理异步操作，接收成功或失败的结果* */// 基于一个对象 可以写.then(正常结果)  .catch(异常结果)// 实例化一个Promise对象 ，才能抛出结果// const p = new Promise(函数)const p = new Promise((resolve, reject) => {// Promise 的结果 不能改变reject('失败了嘤嘤嘤')resolve('成功了哈哈哈哈')})p.then(res=>{console.log(res)}).catch(error=>{console.log(error)})</script>
</body></html>

六、例.使用 Promise+XHR 获取省份列表

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>案例-使用 Promise+XHR 获取省份列表</title>
</head><body><h2>案例-使用 Promise+XHR 获取省份列表</h2><button class="success">请求成功</button><button class="err">请求异常</button><div class="box"></div><script>// 把xhr和Promise结合 → then 和 catch 拿结果const p = new Promise((resolve, reject) => {const xhr = new XMLHttpRequest()xhr.open('get', 'https://hmajax.itheima.net/api/province')xhr.addEventListener('loadend', function() {// console.log(xhr.response)// 如果成功了resolve； 否则reject → if// [200 -300) 都是成功，否则就是失败if (xhr.status >= 200 && xhr.status < 300) {// resolve(真实数据-不能json字符串)resolve(JSON.parse(xhr.response))} else {reject(xhr.response)}})xhr.send()})p.then(res => {console.log('成功的结果', res)}).catch(error => {console.log('失败的结果', error)})</script>
</body></html>

七、封装-简易axios-获取省份列表

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>封装-简易axios函数-获取省份列表</title>
</head><body><h2>封装-简易axios-获取省份列表</h2><div class="box"></div><script>/*** 封装-简易axios-获取省份列表* *///  promise对象.then().catch() -- 上午最后的例子// aixos().then().catch()// 为什么axios() == promise对象 ？ → 说明函数调用拿到的就是Promise对象// 函数基本语法：函数调用会拿到啥？ → 函数的返回值 → 封装函数，返回值是Promise对象// 返回值是Promise对象 负责干啥 → 发类似axios一样的网络请求拿数据 → xhr// axios({url: ''}).then().catch()function HMAxios(config) {// console.log(config)return new Promise((resolve, reject) => {const xhr = new XMLHttpRequest()// xhr.open(请求方法, url)xhr.open(config.method || 'get', config.url)xhr.addEventListener('loadend', function() {// console.log(xhr.response)if (xhr.status >= 200 && xhr.status<300) {resolve(JSON.parse(xhr.response))} else {reject(xhr.response)}})xhr.send()})}// 请求省份HMAxios({url: 'https://hmajax.itheima.net/api/province',// method: 'get'}).then(res => {console.log(res)}).catch(error=>{console.log(error)})// 请求新闻HMAxios({url: 'https://hmajax.itheima.net/api/news',method: 'get'}).then(res=>{console.log(res)})</script>
</body></html>

八、封装-简易axios函数-获取地区列表

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>封装-简易axios函数-获取地区列表</title>
</head><body><h2>封装-简易axios函数-获取地区列表</h2><div class="box"></div><script>/*** 封装-简易axios函数-获取地区列表*/// https://hmajax.itheima.net/api/areafunction HMAxios (config) {return new Promise((resolve, reject) => {const xhr = new XMLHttpRequest()// xhr.open(请求方法, 请求地址)// config.url = 原来默认的地址？ + 查询参数if (config.params) {const params = new URLSearchParams(config.params)  // 类似于对象 ， 请求地址要字符串格式// console.log(params)const str = params.toString()// console.log(str)config.url = config.url + '?' + str// console.log(config.url)}xhr.open(config.method || 'get', config.url)xhr.addEventListener('loadend', function() {// console.log(xhr.response)if (xhr.status>=200&&xhr.status<300) {resolve(JSON.parse(xhr.response))} else {reject(xhr.response)}})xhr.send()})}HMAxios({url: 'https://hmajax.itheima.net/api/area',// method: 'xx',params: {pname: '河北省',cname: '唐山市'}}).then(res=>{console.log(res)})HMAxios({url: 'https://hmajax.itheima.net/api/lol/search',// params: {//   q: '安妮'// }}).then(res=>{console.log(res)})</script>
</body></html>

九、封装-简易axios函数-注册用户

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>封装-简易axios函数-注册用户</title>
</head><body><h2>封装-简易axios函数-注册用户</h2><button class="btn">注册用户</button><script>/*** 封装-简易axios函数-注册用户*/function HMAxios(config) {return new Promise((resolve, reject) => {const xhr = new XMLHttpRequest()// config.url = 原来默认的地址？ + 查询参数if (config.params) {const params = new URLSearchParams(config.params) // 类似于对象 ， 请求地址要字符串格式// console.log(params)const str = params.toString()// console.log(str)config.url = config.url + '?' + str// console.log(config.url)}xhr.open(config.method || 'get', config.url)xhr.addEventListener('loadend', function() {// console.log(xhr.response)if (xhr.status >= 200 && xhr.status < 300) {resolve(JSON.parse(xhr.response))} else {reject(JSON.parse(xhr.response))}})// 有body参数(data)send(json格式的data数据) ， 否则 send()if (config.data) {xhr.setRequestHeader('content-type', 'application/json')xhr.send(JSON.stringify(config.data))} else {xhr.send()}})}HMAxios({url: 'https://hmajax.itheima.net/api/register',method: 'post',data: {username: 'daqiang8888',password: '123456'}}).then(res => {console.log(res)}).catch(error => {console.log(error)})</script>
</body></html>

十，天气预报

主要代码

// 默认渲染 - 天气 → 北京
function getWeather(city){// 发请求拿数据 → 渲染HMAxios({url: 'https://hmajax.itheima.net/api/weather',params: {city}}).then(res=>{console.log(res.data)const data = res.data// 日期document.querySelector('.title').innerHTML = `<span class="date">${data.date}</span><span class="calendar">农历&nbsp;<span class="dateLunar">${data.dateLunar}</span></span>`// 替换城市名document.querySelector('.area').innerHTML = data.area// 今日温度document.querySelector('.weather-box').innerHTML = `<div class="tem-box"><span class="temp"><span class="temperature">${data.temperature}</span><span>°</span></span></div><div class="climate-box"><div class="air"><span class="psPm25">${data.psPm25}</span><span class="psPm25Level">${data.psPm25Level}</span></div><ul class="weather-list"><li><img src="${data.weatherImg}" class="weatherImg" alt=""><span class="weather">${data.weather}</span></li><li class="windDirection">${data.windDirection}</li><li class="windPower">${data.windPower}</li></ul></div>`// 一周天气const week = data.dayForecastconsole.log(week)document.querySelector('.week-wrap').innerHTML = week.map(item => {return `<li class="item"><div class="date-box"><span class="dateFormat">${item.dateFormat}</span><span class="date">${item.date}</span></div><img src="${item.weatherImg}" alt="" class="weatherImg"><span class="weather">${item.weather}</span><div class="temp"><span class="temNight">${item.temNight}</span>-<span class="temDay">${item.temDay}</span><span>℃</span></div><div class="wind"><span class="windDirection">${item.windDirection}</span><span class="windPower">&lt;${item.windPower}</span></div></li>`}).join('')})
}// 有参数 → 城市id → 北京城市id110100 string
getWeather('110100')// 用户输入 → 请求对应的城市 → 渲染城市// 引入库，文档中搜索函数使用 _.xx() → 返回值
// _.debounce(函数, 延迟时间)
// 这里是函数表达式写法， const fn = 匿名函数 → 顺序：先定义后使用
const fn = _.debounce(function() {// console.log(11)HMAxios({url: 'https://hmajax.itheima.net/api/weather/city',params: {city: document.querySelector('.search-city').value}}).then(res => {console.log(res.data)document.querySelector('.search-list').innerHTML = res.data.map(item => {// data-code 点击的时候按code值发请求渲染城市天气return `<li class="city-item" data-code="${item.code}">${item.name}</li>`}).join('')})
}, 800)document.querySelector('.search-city').addEventListener('input', fn)// 用户选中某个城市，发请求 → 得到这个城市的天气 → 渲染天气 → getWeather(城市id)
document.querySelector('.search-list').addEventListener('click', function(e) {if (e.target.classList.contains('city-item')) {getWeather(e.target.dataset.code)}
})

AJAX三、XHR，基本使用，查询参数，数据提交，promise的三种状态，封装-简易axios-获取省份列表 / 获取地区列表 / 注册用户，天气预报

一、XMLHttpRequest基本使用 XMLHttpRequest（XHR）对象用于与服务器交互。二、XMLHttpRequest-查询参数语法: 用 & 符号分隔的键/值对列表三、XMLHttpRequest-数据提交核心步骤 : 1. 请求头设置 Content-Type 2. 请求体携带符合要求的数…...

编程日记 2024/12/8 19:14:40

mybatis之数据统计与自定义异常处理

文章目录需求描述定义实体方式一、mybatisPlus实现方式二、自定义SQL实现简单查询过滤查询异常处理1、SQL拼写异常在使用Mybatis或MybatisPlus进行数据统计，在【 SpringBoot的Mybatis-plus实战之基础知识】中对mybatisplus引入有介绍，本次要使用其进…...

编程日记 2024/12/8 19:13:39

qt creator使用taglib读取音频元信息，windows平台vcpkg安装

注意：qt creator用的构建组件是qt 6.2.3 MSVC2019 64bit 安装vcpkg // 我的安装位置C:\vcpkg git clone https://github.com/microsoft/vcpkg.git C:\vcpkg cd C:\vcpkg .\bootstrap-vcpkg.bat// 设置系统环境变量 VCPKG_ROOT C:/vcpkg用vcpkg安装taglib vcpkg …...

编程日记 2024/12/8 19:11:35

设计模式之生成器模式

目录 1.简介 2.结构 3.使用场景 4.实例 5.优缺点 6.与其他模式的关系 7.总结 1.简介生成器模式（Builder Pattern）是一种创建型设计模式，它允许你通过一步一步构建复杂对象，而不是通过一个包含大量参数的构造函数或方法。该…...

编程日记 2024/12/8 19:08:31

python学opencv|读取图像（三）放大和缩小图像

【1】引言前序已经学习了常规的图像读取操作和图像保存技巧，相关文章链接为： python学opencv|读取图像-CSDN博客 python学opencv|读取图像（二）保存彩色图像-CSDN博客今天我们更近一步，学习放大和缩小图像的技巧&…...

编程日记 2024/12/8 19:05:28

1 数据库（上）：MySQL的概述和安装、SQL简介、IDEA连接数据库使用图形化界面

文章目录前言一、数据库相关的概念二、MySQL概述1 MySQL的安装和配置2 MySQL登录、退出（1）mysql -uroot -p1234 或者mysql -uroot -p ---- 登录（2）exit或者quit ---- 退出 3 远程登录服务器上的MySQL命令mysql -hip地址 -P3306 -…...

编程日记 2024/12/8 19:03:26

C++初阶—类与对象(中篇)

第一章：类的6个默认成员函数如果一个类中什么成员都没有，简称为空类。空类中真的什么都没有吗？并不是，任何类在什么都不写时，编译器会自动生成以下6个默认成员函数。默认成员函数：用户没有显式实现&a…...

编程日记 2024/12/8 19:01:23

Leetcode15. 三数之和(HOT100)

链接一般这种三数之和，四数之和都使用双指针，复杂度最优，次一级可使用哈希表。前者要求有序，后者空间上有花费。题目： 题目要求答案中不能出现重复vector，比如{-1 1 0}和{-1 0 1}； 这两个…...

编程日记 2024/12/8 18:58:18

Oracle数据库小白备忘

sqlplus相关导入sql文件在sqlplus中，导入一个sql文件，是使用或者start。如当前目录下有一个hello.sql，则可以使用 hello.sql 或者 start hello.sql 来进行导入，功能类似于mysql里面的source。退出编辑模式当使用sqlplus…...

编程日记 2024/12/8 18:57:17

DDR4与DDR3服务器内存的关键区别有哪些？

内存作为服务器性能的关键组件之一，已经经历了从DDR3到DDR4的过渡。DDR4内存相较于DDR3在多个方面有所提升，包括速度、带宽、功耗以及数据传输效率等。然而，尽管DDR4内存在性能上占有优势，DDR3内存依然在一些特定场景中得到了广泛…...

编程日记 2024/12/8 18:51:09

Linux: shell: bash: set -x；调试使用

man bash set -x -x After expanding each simple command, for command, case command, select command, or arithmetic for command, display the expanded value of PS4, followed by the command and its expanded arguments or associated word list. 这个可以帮助将变量…...

编程日记 2024/12/8 18:50:07

Hadoop生态圈框架部署伪集群版（五）- HBase伪分布式部署

文章目录前言一、Hbase伪分布式部署（手动部署）1. 下载Hbase2. 上传安装包3. 解压HBase安装包4. 配置HBase配置文件4.1 修改hbase-env.sh配置文件4.2 修改hbase-site.xml配置文件4.3 修改regionservers配置文件4.4 删除hbase中slf4j-reload4j-1.7.33.jar…...

编程日记 2024/12/8 18:49:06

自定义指令，全局，局部，注册

让输入框自动获取焦点(每次刷新自动获取焦点） <template><div><h3>自定义指令</h3><input ref"inp" type"text"></div> </template><script> export default {mounted(){this.$refs.inp.focus…...

编程日记 2024/12/8 18:47:03

静坐修心.

文章目录打坐的历史文化渊源东方的起源与传承西方的接受与演变现代生活中的打坐盘腿坐对身体的影响促进脊椎健康改善呼吸系统功能增强消化系统机能改善血液循环调节神经系统错误姿势及其他潜在危害盘腿坐对心理的作用促进内心平静与放松提升自我觉察与内在探索培养专注力与精…...

编程日记 2024/12/8 18:46:02

设计模式c++（一）

文章目录一、面向对象设计原则二、模版方法三、策略模式四、观察者模式五、装饰模式六、桥模式七、工厂方法_Factory Method八、抽象工厂_Abstract Factory九、原型模式十、构建器_builder十一、单件模式_Singleton十二、享元模式_Flyweight 一、面向对象设计原则设计模式的…...

编程日记 2024/12/8 18:41:55

核密度估计——从直方图到核密度（核函数）估计_带宽选择

参考核密度估计（KDE）原理及实现-CSDN博客机器学习算法（二十一）：核密度估计 Kernel Density Estimation(KDE)_算法_意念回复-GitCode 开源社区引言在统计学中，概率密度估计是一种重要的方法&#xff0…...

编程日记 2024/12/8 18:39:46

Vant UI Axure移动端元件库：提升移动端原型设计效率

UI框架的选择对于提升开发效率和用户体验至关重要。Vant UI，作为一款基于Vue.js的轻量、可靠的移动端组件库，自2017年开源以来，凭借其丰富的组件库、良好的性能以及广泛的兼容性，在移动端开发领域崭露头角，赢得了众多开…...

编程日记 2024/12/8 18:38:44

如何用 JavaScript 操作 DOM 元素？

如何用 JavaScript 操作 DOM 元素？——结合实际项目代码示例讲解在前端开发中，DOM（文档对象模型）操作是与页面交互的核心。通过 DOM 操作，开发者可以动态地修改页面内容、响应用户交互、控制样式等。JavaScript 提供…...

编程日记 2024/12/8 18:35:41

【Ubuntu】URDC（Ubuntu远程桌面助手）安装、用法，及莫名其妙进入全黑模式的处理

1、简述 URDC是Ubuntu远程桌面助手的简称。它可以：实时显示桌面：URDC支持通过Windows连接至Ubuntu设备（包括x86和ARM架构，例如Jetson系列、树莓派等）的桌面及光标。远程操控双向同步剪切板多客户端连接：同一Ubuntu设备最多可同时被三台Windows客户端连接和操控，适用于…...

编程日记 2024/12/8 18:34:39

ES-DSL查询

term查询因为精确查询的字段搜是不分词的字段，因此查询的条件也必须是不分词的词条。查询时，用户输入的内容跟自动值完全匹配时才认为符合条件。如果用户输入的内容过多，反而搜索不到数据。语法说明： // term查询 GET /index…...

编程日记 2024/12/8 18:27:32

IGP（Interior Gateway Protocol，内部网关协议）

IGP（Interior Gateway Protocol，内部网关协议） 是一种用于在一个自治系统（AS）内部传递路由信息的路由协议，主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...

编程新知 2025/10/12 11:54:26

微信小程序云开发平台MySQL的连接方式

注：微信小程序云开发平台指的是腾讯云开发先给结论：微信小程序云开发平台的MySQL，无法通过获取数据库连接信息的方式进行连接，连接只能通过云开发的SDK连接，具体要参考官方文档： 为什么？ 因为…...

编程新知 2025/10/24 12:10:57

uniapp 字符包含的相关方法

在uniapp中，如果你想检查一个字符串是否包含另一个子字符串，你可以使用JavaScript中的includes()方法或者indexOf()方法。这两种方法都可以达到目的，但它们在处理方式和返回值上有所不同。使用includes()方法 includes()方法用于判断一个字…...

编程新知 2025/9/28 19:00:18

python爬虫——气象数据爬取

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

编程新知 2025/7/9 12:15:58

uniapp 集成腾讯云 IM 富媒体消息（地理位置/文件）

UniApp 集成腾讯云 IM 富媒体消息全攻略（地理位置/文件） 一、功能实现原理腾讯云 IM 通过消息扩展机制支持富媒体类型，核心实现方式： 标准消息类型：直接使用 SDK 内置类型（文件、图片等）自…...

编程新知 2025/10/25 5:53:05

pycharm 设置环境出错

pycharm 设置环境出错 pycharm 新建项目，设置虚拟环境，出错 pycharm 出错 Cannot open Local Failed to start [powershell.exe, -NoExit, -ExecutionPolicy, Bypass, -File, C:\Program Files\JetBrains\PyCharm 2024.1.3\plugins\terminal\shell-int…...

编程新知 2025/8/9 4:55:19

Tauri2学习笔记

教程地址：https://www.bilibili.com/video/BV1Ca411N7mF?spm_id_from333.788.player.switch&vd_source707ec8983cc32e6e065d5496a7f79ee6 官方指引：https://tauri.app/zh-cn/start/ 目前Tauri2的教程视频不多，我按照Tauri1的教程来学习&…...

编程新知 2025/10/31 18:41:05