JavaScript-Ajax-axios-Xhr
JS的异步请求
主要有xhr xmlHttpRequest 以及axios 下面给出代码以及详细用法，都写在了注释里 直接拿去用即可
测试中默认的密码为123456 账号admin
其他一律返回登录失败
代码实例
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body><p class="my"></p><script>//这里简单介绍利用xhr方式进行异步//xhr xmlhttprequest/*先说ajax吧，其实就是一种概念的统称，异步调用。我们熟知的XHR、axios、fetch都是在这个概念之下。具体到后面三个，都是异步请求的实现方式。浏览器环境中有两个和ajax有关的原生api，一个是XHR一个是Fetch，Fetch是与XHR同级且后出的异步请求方式。axios则是一个异步请求的第三方库。JQ的ajax部分和axios的实现都是源于对XHR的封装
axios 的话可以自动把json数据转换成js对象 利用json.prase方法下面的接口文档来自于黑马前端接口文档 可以拿来做测试*/var xhr=new XMLHttpRequest();//创建xhr对象var url='http://ajax-api.itheima.net/api/province'//服务器请求地址//这里补充一下 如果有多个参数prames 可以用插件 urlsearchprames 先把要查询的数组转换成字符串然后拼接到url 拼接方式可以用字符串模板xhr.open('get',url,true)//创建请求 参数：请求方式,请求地址 是否开启异步xhr.addEventListener('loadend',()=>{//开启监听console.log(xhr.response)//打印响应内容 发现这时候还是服务器的json数据 利用json的内置方法转化为js可以识别的数组 data=JSON.parse(xhr.response)enddata=data.data//发现键值对为data 进行循环输出for (let index = 0; index < enddata.length; index++) {let element = enddata[index]; console.log(element) }})xhr.send();//发送请求</script>
<!--这里是axios的写法以及用法 可以对比上面的内置xhr方法-->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js">
//引入axios
</script>
<input type="text" id="m" placeholder="用户名">
<input type="text" id="m1" placeholder="密码">
<button type="submit" class="sub-btn">登录</button>
<script>
//对登录进行监听
document.querySelector(".sub-btn").addEventListener('click',() =>{const username =document.querySelector("#m").valueconst password=document.querySelector("#m1").valueconsole.log(username+password)//下面是具体写法 上面是获取用户输入的内容axios({
url:"http://ajax-api.itheima.net/api/login",
method:'post',
data:{//存放交换的数据
username:username,
password:password
}}).then(result =>{//成功之后返回200console.log(result)//打印成功的响应内容console.log(result.data.message)confirm(result.data.message)}).catch(error =>{//异常捕获 非200的console.log(error)//打印错误异常内容confirm(error.response.data.message)})}
)</script>
</body>
</html>成功截图：
这里可以看到区别 axios自动把json数据转换了 在控制台可以看到 返回的请求头 请求方式 以及状态码 还有数据的结构
相关文章：
JavaScript-Ajax-axios-Xhr
JS的异步请求 主要有xhr xmlHttpRequest 以及axios 下面给出代码以及详细用法，都写在了注释里 直接拿去用即可 测试中默认的密码为123456 账号admin 其他一律返回登录失败 代码实例 <!DOCTYPE html> <html lang"en"> <head><…...
怎样查看kafka写数据送到topic是否成功
要查看 Kafka 写数据是否成功送到主题（topic），可以通过以下几种方法来进行确认： Kafka 生产者确认机制：Kafka 提供了生产者的确认机制，您可以在创建生产者时设置 acks 属性来控制确认级别。常见的确认级别包…...
腾讯mini项目-【指标监控服务重构】2023-08-16
今日已办 v1 验证 StageHandler 在处理消息时是否为单例，【错误尝试】 type StageHandler struct { }func (s StageHandler) Middleware1(h message.HandlerFunc) message.HandlerFunc {return func(msg *message.Message) ([]*message.Message, error) {log.Log…...
PTA：7-3 两个递增链表的差集
^两个递增链表的差集 题目输入样例输出样例 代码 题目 输入样例 5 1 3 5 7 9 3 2 3 5输出样例 3 1 7 9代码 #include <iostream> #include <list> #include <unordered_set> using namespace std; int main() {int n1, n2;cin >> n1;list<int&g…...
智能合约漏洞案例，DEI 漏洞复现
智能合约漏洞案例，DEI 漏洞复现 1. 漏洞简介 https://twitter.com/eugenioclrc/status/1654576296507088906 2. 相关地址或交易 https://explorer.phalcon.xyz/tx/arbitrum/0xb1141785b7b94eb37c39c37f0272744c6e79ca1517529fec3f4af59d4c3c37ef 攻击交易 3. …...
Attention is all you need 论文笔记
该论文引入Transformer，主要核心是自注意力机制，自注意力（Self-Attention）机制是一种可以考虑输入序列中所有位置信息的机制。 RNN介绍 引入RNN为了更好的处理序列信息，比如我 吃 苹果，前后的输入之间是有…...
Hdoop伪分布式集群搭建
文章目录 Hadoop安装部署前言1.环境2.步骤3.效果图 具体步骤（一）前期准备（1）ping外网（2）配置主机名（3）配置时钟同步（4）关闭防火墙 （二）…...
java临时文件
临时文件 有时候，我们程序运行时需要产生中间文件，但是这些文件只是临时用途，并不做长久保存。 我们可以使用临时文件，不需要长久保存。 public static File createTempFile(String prefix, String suffix)prefix 前缀 suffix …...
C++中的＜string＞头文件 和 ＜cstring＞头文件简介
C中的<string>头文件 和 <cstring>头文件简介 在C中<string> 和 <cstring> 是两个不同的头文件。 <string> 是C标准库中的头文件，定义了一个名为std::string的类，提供了对字符串的操作如size()、length()、empty() 及字…...
安装MySQL
Centos7下安装MySQL详细步骤_centos7安装mysql教程_欢欢李的博客-CSDN博客...
输入学生成绩，函数返回最大元素的数组下标，求最高分学生成绩（输入负数表示输入结束）
scanfscore()函数用于输入学生的成绩 int scanfscore(int score[N])//输入学生的成绩 {int i -1;do {i;printf("输入学生成绩:");scanf("%d", &score[i]);} while (score[i] > 0);return i; } findmax()用于寻找最大值 int findmax(int score[N…...
常用音频接口：TDM，PDM，I2S，PCM
常用音频接口：TDM，PDM，I2S，PCM_tdm音频_沙漠的甲壳虫的博客-CSDN博客 I2S/PCM接口及音频codec_音频pcm接口模块设计-CSDN博客 2个TDM8功放调试ing_周龙(AI湖湘学派)的博客-CSDN博客 数字音频接口时序----IIS、TDM、PCM、PDM_td…...
git clone报错Failed to connect to github.com port 443 after 21055 ms:
git 设置代理端口号 git config --global http.proxy http://127.0.0.1:10085 和 git config --global https.proxy http://127.0.0.1:10085 然后就可以成功git clone hugging face的数据集了 如果是https://huggingface.co/datasets/shibing624/medical/tree/main 那么…...
【操作系统】深入浅出死锁问题
死锁的概念 在多线程编程中，我们为了防止多线程竞争共享资源而导致数据错乱，都会在操作共享资源而导致数据错乱，都会在操作共享资源之前加上互斥锁，只有成功获得到锁的线程，才能操作共享资源，获取不到锁的…...
springboot实现webSocket服务端和客户端demo
1：pom导入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId><version>2.2.7.RELEASE</version></dependency>2：myWebSocketClien…...
代码走读: FFMPEG-ffplayer02
AVFrame int attribute_align_arg avcodec_receive_frame(AVCodecContext *avctx, AVFrame *frame) 选取一个音频解码器 和 一个视频解码器分别介绍该解码器功能 音频G722 g722dec.c -> g722_decode_frame 通过 ff_get_buffer 给 传入的 frame 指针分配内存 g722_decode_…...
【数据结构】——排序算法的相关习题
目录 一、选择题题型一 （插入排序）1、直接插入排序2、折半插入排序3、希尔排序 题型二（交换排序）1、冒泡排序2、快速排序 题型三（选择排序）1、简单选择排序~2、堆排序 ~题型四（归并排序…...
C高级day5（Makefile）
一、Xmind整理： 二、上课笔记整理： 1.#----->把带参宏的参数替换成字符串 #include <stdio.h> #include <stdlib.h> #include <string.h> #define MAX(a,b) a>b?a:b #define STR(n) #n int main(int argc, const char *argv…...
Android 系统中适配OAID获取
一、OAID概念 OAID（Open Anonymous Identification）是一种匿名身份识别标识符， 用于在移动设备上进行广告追踪和个性化广告投放。它是由中国移动通信集 团、中国电信集团和中国联通集团共同推出的一项行业标准 OAID值为一个64位的数字 二、…...
差分数组leetcode 2770 数组的最大美丽值
什么是差分数组 差分数组是一种数据结构，它存储的是一个数组每个相邻元素的差值。换句话说，给定一个数组arr[]，其对应的差分数组diff[]将满足： diff[i] arr[i1] - arr[i] 对于所有 0 < i < n-1 差分数组的作用 用于高效…...
Cursor实现用excel数据填充word模版的方法
cursor主页：https://www.cursor.com/ 任务目标：把excel格式的数据里的单元格，按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例，…...
React Native 开发环境搭建（全平台详解）
React Native 开发环境搭建（全平台详解） 在开始使用 React Native 开发移动应用之前，正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南，涵盖 macOS 和 Windows 平台的配置步骤，如何在 Android 和 iOS…...
模型参数、模型存储精度、参数与显存
模型参数量衡量单位 M：百万（Million） B：十亿（Billion） 1 B 1000 M 1B 1000M 1B1000M 参数存储精度 模型参数是固定的，但是一个参数所表示多少字节不一定，需要看这个参数以什么…...
.Net框架，除了EF还有很多很多......
文章目录 1. 引言2. Dapper2.1 概述与设计原理2.2 核心功能与代码示例基本查询多映射查询存储过程调用 2.3 性能优化原理2.4 适用场景 3. NHibernate3.1 概述与架构设计3.2 映射配置示例Fluent映射XML映射 3.3 查询示例HQL查询Criteria APILINQ提供程序 3.4 高级特性3.5 适用场…...
MongoDB学习和应用(高效的非关系型数据库)
一丶 MongoDB简介 对于社交类软件的功能，我们需要对它的功能特点进行分析： 数据量会随着用户数增大而增大读多写少价值较低非好友看不到其动态信息地理位置的查询… 针对以上特点进行分析各大存储工具： mysql：关系型数据库&am…...
理解 MCP 工作流：使用 Ollama 和 LangChain 构建本地 MCP 客户端
🌟 什么是 MCP？ 模型控制协议 (MCP) 是一种创新的协议，旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议，它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...
从深圳崛起的“机器之眼”：赴港乐动机器人的万亿赛道赶考路
进入2025年以来，尽管围绕人形机器人、具身智能等机器人赛道的质疑声不断，但全球市场热度依然高涨，入局者持续增加。 以国内市场为例，天眼查专业版数据显示，截至5月底，我国现存在业、存续状态的机器人相关企…...
【磁盘】每天掌握一个Linux命令 - iostat
目录 【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景 注意事项 【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat（I/O Statistics）是Linux系统下用于监视系统输入输出设备和CPU使…...
[10-3]软件I2C读写MPU6050 江协科技学习笔记（16个知识点）
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16...
JUC笔记(上)-复习 涉及死锁 volatile synchronized CAS 原子操作
一、上下文切换 即使单核CPU也可以进行多线程执行代码，CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短，所以CPU会不断地切换线程执行，从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...