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

AJAX 1——axios体验、认识URL、常用请求方法、HTTP协议、错误处理、form-serialize插件

news 文章来源：https://blog.csdn.net/weixin_72043867/article/details/142706959 2025/5/7 7:14:34

AJAX 1——axios体验、认识URL、常用请求方法、HTTP协议、错误处理、form-serialize插件

1.AJAX入门与体验axios

  • 定义：浏览器与服务器进行数据通信的技术

  • 体验axios库，与服务器通信

    • 引入axios.js
    • 使用axios函数
    <p class="my-p"></p><!-- 1.引入axios库 --><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>// 2.使用axios函数axios({url: 'http://ajax-api.itheima.net/api/province'}).then(result => {console.log(result)console.log(result.data.list)console.log(result.data.list.join('<br>'))document.querySelector('.my-p').innerHTML = result.data.list.join('<br>')})

2.认识URL

  • URL定义：统一资源定位符，简称网址，因特网上标准的资源的地址

  • URL组成：协议://域名/资源路径

    • 协议：规定浏览器与服务器之间传输数据的格式
    • 域名：标记服务器在互联网的方位
    • 资源路径：标记资源在服务器下的具体路径

  • URL查询参数

    • 浏览器提供给服务器额外的信息，让服务器返回浏览器想要的数据

    • 语法：http://xxxx.com/xxx/xxx?参数名1=值1&参数名2=值2

    • 使用params选项，axios在运行时会把参数名和值拼接到url?参数名=值

      <!-- 1.引入axios库 --><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>// 2.使用axios函数axios({url: 'http://hmajax.itheima.net/api/city',params: {pname: '陕西省'}}).then(result => {document.querySelector('.my-p').innerHTML = result.data.list.join('<br>')})

  • 案例：地区查询（通过多个参数查询）

    <!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>04.案例_地区查询</title><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"><style>:root {font-size: 15px;}body {padding-top: 15px;}</style>
</head><body><div class="container"><form id="editForm" class="row"><!-- 输入省份名字 --><div class="mb-3 col"><label class="form-label">省份名字</label><input type="text" value="北京" name="province" class="form-control province" placeholder="请输入省份名称" /></div><!-- 输入城市名字 --><div class="mb-3 col"><label class="form-label">城市名字</label><input type="text" value="北京市" name="city" class="form-control city" placeholder="请输入城市名称" /></div></form><button type="button" class="btn btn-primary sel-btn">查询</button><br><br><p>地区列表: </p><ul class="list-group"><!-- 示例地区 --><li class="list-group-item">东城区</li></ul></div><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>/*获取地区列表: 查询参数:pname: 省份或直辖市名字cname: 城市名字*/const button = document.querySelector('button')button.addEventListener('click', function () {const list = document.querySelector('.list-group')const province = document.querySelector('[name=province]').valueconst city = document.querySelector('[name=city]').valueaxios({url: 'http://hmajax.itheima.net/api/area',params: {pname: province,cname: city}}).then(result => {// list.removeChild(document.querySelectorAll('.list-group-item'))console.log(result)const lists = result.data.list.map(function (item) {return `<li class="list-group-item">${item}</li>`}).join('')list.innerHTML = lists})})</script>
</body></html>

3.常用请求方法

  • Get：获取数据(默认)

  • POST：提交数据

     document.querySelector('.btn').addEventListener('click', () => {axios({url: 'http://hmajax.itheima.net/api/register',method: 'post',data: {username: 'xxg213421',password: '1233432'}}).then(result => {console.log(result)})})

  • PUT：修改数据

  • DELETE：删除数据

  • PATCH：修改数据（部分）

  • axios请求配置：

    • url：请求的URL网址
    • method：请求的方法，GET可以省略
    • data：提交的数据

4.axios错误处理

  • 在then方法后面，通过点语法调用catch方法，传入回调函数并定义形参

    document.querySelector('.btn').addEventListener('click', () => {axios({url: 'http://hmajax.itheima.net/api/register',method: 'post',data: {username: 'xxg213421',password: '1233432'}}).then(result => {console.log(result)}).catch(error => {  //处理错误信息console.log(error.response.data.message)alert(error.response.data.message)})})

5.HTTP协议

  • HTTP协议：规定了浏览器发送及服务器返回内容的格式

  • 请求报文：浏览器按照HTTP协议要求的格式，发送给服务器的内容

    • 组成部分4个：

      • 请求行：请求方法，URL，协议
      • 请求头：以键值对的格式携带的附加信息，eg:Content-Type
      • 空行：分隔请求头与请求体
      • 请求体：发送的资源

    • 怎么在浏览器中查看：右键检查——>网络——>Fetch/XHR——>选择某次想要看的信息进行查看

    • 通过请求报文进行错误排查——去看报文中的载荷，以及响应结果

  • 响应报文：服务器按照HTTP协议要求的格式，返回给浏览器的格式

    • 组成部分4个：

      • 响应行：协议，HTTP响应状态码，状态信息
      • 响应头：以键值对的格式携带的附加信息，eg:Content-Type
      • 空行：分隔响应头和响应体
      • 响应体：返回的资源

    • HTTP响应状态码：

      状态码说明
      1XX信息
      2XX成功
      3XX重定向消息
      4XX客户端错误（浏览器）
      5XX服务器错误

6.接口文档

  • 定义：后端提供的描述接口的文档，接口就是使用AJAX和服务器通讯时，使用的URL，请求方法以及参数

  • 登录注册案例：(注意这里的服务器及接口是别人的，可以自己写)

    • 注册：这里的注册没有使用输入框数据,直接通过代码发送的
    <script>/*注册用户: http://hmajax.itheima.net/api/register请求方法: POST参数名:username: 用户名 (中英文和数字组成, 最少8位)password: 密码 (最少6位)目标: 点击按钮, 通过axios提交用户和密码, 完成注册*/document.querySelector('.btn').addEventListener('click', () => {axios({url: 'http://hmajax.itheima.net/api/register',method: 'post',data: {username: 'lyq20040110',password: '20040110'}}).then(result => {console.log(result)}).catch(error => {  //处理错误信息console.log(error.response.data.message)alert(error.response.data.message)})})</script>

  • 登录：和前面注册用的服务器是同一个，所以上面注册的信息可以登陆成功

    <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>12.案例_登录_提示消息</title><!-- 引入bootstrap.css --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"><!-- 公共 --><style>html,body {background-color: #EDF0F5;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;}.container {width: 520px;height: 540px;background-color: #fff;padding: 60px;box-sizing: border-box;}.container h3 {font-weight: 900;}</style><!-- 表单容器和内容 --><style>.form_wrap {color: #8B929D !important;}.form-text {color: #8B929D !important;}</style><!-- 提示框样式 --><style>.alert {transition: .5s;opacity: 0;}.alert.show {opacity: 1;}</style>
</head><body><div class="container"><h3>欢迎-登录</h3><!-- 登录结果-提示框 --><div class="alert alert-success" role="alert">提示消息</div><!-- 表单 --><div class="form_wrap"><form><div class="mb-3"><label for="username" class="form-label">账号名</label><input type="text" class="form-control username"></div><div class="mb-3"><label for="password" class="form-label">密码</label><input type="password" class="form-control password"></div><button type="button" class="btn btn-primary btn-login"> 登 录 </button></form></div></div><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>// 目标1：点击登录时，用户名和密码长度判断，并提交数据和服务器通信// 目标2：使用提示框，反馈提示消息//获取提示框//功能：//1.显示提示框//2.不同提示文字，成功绿色不成功红色//3.两秒后自动消失const myAlert = document.querySelector('.alert')function alertFn(isSuccess, msg) {myAlert.classList.add('show')myAlert.innerHTML = msgconst bgStyle = isSuccess ? 'alert-success' : 'alert-danger'myAlert.classList.add(bgStyle)setTimeout(() => {myAlert.classList.remove('show')//重置背景色myAlert.classList.remove(bgStyle)}, 2000)}// 1.1 登录-点击事件document.querySelector('.btn-login').addEventListener('click', () => {// 1.2 获取用户名和密码const username = document.querySelector('.username').valueconst password = document.querySelector('.password').value// console.log(username, password)// 1.3 判断长度if (username.length < 8) {console.log('用户名必须大于等于8位')alertFn(false, '用户名必须大于等于8位')return // 阻止代码继续执行}if (password.length < 6) {console.log('密码必须大于等于6位')alertFn(false, '密码必须大于等于6位')return // 阻止代码继续执行}// 1.4 基于axios提交用户名和密码// console.log('提交数据到服务器')axios({url: 'http://hmajax.itheima.net/api/login',method: 'POST',data: {username,password}}).then(result => {console.log(result)console.log(result.data.message)alertFn(true, '登陆成功')}).catch(error => {console.log(error)console.log(error.response.data.message)alertFn(false, '用户名或密码不正确')})})</script>
</body>
</html>

7.form-serialize插件

  • 作用：快速收集表单元素的值
<body><form action="javascript:;" class="example-form"><input type="text" name="uname"><br><input type="text" name="pwd"><br><input type="button" class="btn" value="提交"></form><!-- 目标：在点击提交时，使用form-serialize插件，快速收集表单元素值--><!-- 引入插件 --><script src="./form-serialize.js"></script><script>document.querySelector('.btn').addEventListener('click', () => {// 使用serialize函数const form = document.querySelector('.example-form')//参数1：获取哪个表单参数 //**表单属性要设置name值，值会作为对象的属性名//**建议name属性的值和接口文档参数名一致 //参数2：配置对象//**hash:设置获取的数据结构——推荐为true//****true:JS对象//****false:查询字符串——推荐为true//**empty:是否获取空值const data = serialize(form, { hash: true, empty: true })console.log(data)})</script>
</body>
</html>

相关文章：

AJAX 1——axios体验、认识URL、常用请求方法、HTTP协议、错误处理、form-serialize插件

AJAX 1——axios体验、认识URL、常用请求方法、HTTP协议、错误处理、form-serialize插件 1.AJAX入门与体验axios 定义&#xff1a;浏览器与服务器进行数据通信的技术 体验axios库&#xff0c;与服务器通信 引入axios.js使用axios函数 <p class"my-p"></p&…...

编程日记 2024/10/5 8:24:23

Java-运算符

一、运算符是什么&#xff1f; 其实就如字面意思一样啦~就像数学中的运算符一样:(" "&#xff0c;" - "&#xff0c;" * "&#xff0c;" / "&#xff0c;" % "...)。 计算机的用途就如其名&#xff1a;运算。而既然要运算…...

编程日记 2024/10/5 8:23:22

ubutun nginx 安装和解决端口占用问题

目录 一、删除已有nginx 二、安装nginx 三、端口占用问题 分析问题 解决方法&#xff1a;更换默认端口 nginx是一个高性能的 HTTP 和反向代理 web 服务器&#xff0c;同时也提供了 IMAP/POP3/SMTP 服务。是一款轻量级的 Web 服务器/反向代理服务器及电子邮件&#xff08;I…...

编程日记 2024/10/5 8:22:21

螺蛳壳里做道场：老破机搭建的私人数据中心---Centos下Docker学习01(环境准备)

1 准备工作 由于创建数据中心需要安装很多服务器&#xff0c;这些服务器要耗费很所物理物理计算资源、存储资源、网络资源和软件资源&#xff0c;作为穷学生只有几百块的n手笔记本&#xff0c;不可能买十几台服务器来搭建数据中心&#xff0c;也不愿意跑实验室&#xff0c;想躺…...

编程日记 2024/10/5 8:21:20

解决：使用layui.treeTable.updateNode,更新表格数据后，done里面的事件丢失问题

1. 背景 在给树形表格添加行点击事件&#xff0c;并且只更新当前行数据。 treeTable.updateNode("SpeProjListId", result.LAY_DATA_INDEX, result);更新数据后&#xff0c;点击事件失效。 1. 给字段绑定事件&#xff1a; class"link_a link_style" , {…...

编程日记 2024/10/5 8:19:18

【Linux】环境变量(初步认识环境变量)

文章目录 1. 环境变量1.1 基本概念 2. 认识常见环境变量2.1 PATH2.2 HOME2.3 SHELL2.4 PWD2.5 USER 3. 理解环境变量 1. 环境变量 在main函数的命令行参数中&#xff0c;有argc、argv、env三个参数。 argc&#xff1a;命令行参数的个数argc&#xff1a;存放每个参数的具体数值…...

编程日记 2024/10/5 8:16:15

79. 单词搜索

思路 每次以当前位置为初始位置开始遍历&#xff0c;看是否找到单词 &#xff08;以官方题解做出&#xff09; v:代表等于work[k]且已走过的位置 d:四个方向 回溯&#xff08;遍历&#xff09;&#xff1a; 匹配不上&#xff1a;终止 找到了&#xff1a;终止&#xff08;先…...

编程日记 2024/10/5 8:15:12

[单master节点k8s部署]28.Istio流量管理（四）

金丝雀发布实验 部署两个pod&#xff0c;他们分别是canary-v1和canary-v2。 随后进行service的部署&#xff1a; apiVersion: v1 kind: Service metadata:name: canary-svc34namespace: default spec:selector:apply: canaryports:- port: 80protocol: TCPtargetPort: 80进行…...

编程日记 2024/10/5 8:13:10

Windows 11 安装配置 Git 教程

目录 Git Windows 11 环境安装配置 Git Git Git是一个开源的分布式版本控制系统&#xff0c;由Linus Torvalds创建&#xff0c;用于有效、高速地处理从小到大的项目版本管理。Git是目前世界上最流行的版本控制系统&#xff0c;广泛应用于软件开发中。 以下是Git的一些关键特…...

编程日记 2024/10/5 8:08:05

Go基础学习11-测试工具gomock和monkey的使用

文章目录 基础回顾MockMock是什么安装gomockMock使用1. 创建user.go源文件2. 使用mockgen生成对应的Mock文件3. 使用mockgen命令生成后在对应包mock下可以查看生成的mock文件4. 编写测试代码5. 运行代码并查看输出 GomonkeyGomonkey优势安装使用对函数进行monkey对结构体中方法…...

编程日记 2024/10/5 8:06:03

PHP基础教程

PHP基础教程 1. PHP简介 PHP是一种广泛使用的开源服务器端脚本语言&#xff0c;它特别适用于网页开发&#xff0c;并可嵌入到HTML中使用。 2. PHP环境搭建 Windows: 可以使用XAMPP或WAMP。Mac: 可以使用MAMP。Linux: 可以使用XAMPP或LAMP。 3. 第一个PHP程序 创建一个名为…...

编程日记 2024/10/5 8:04:01

Python或R时偏移算法实现

&#x1f3af;要点 计算单变量或多变量时序距离&#xff0c;使用欧几里得、曼哈顿等函数量化不同时序差异。量化生成时序之间接近度相似性矩阵。使用高尔距离和堪培拉距离等相似度测量。实现最小方差匹配算法&#xff0c;绘制步进模式的图形表示。其他语言包算法实现。 &…...

编程日记 2024/10/5 7:57:55

华为云LTS日志上报至观测云最佳实践

华为云LTS简介 华为云云日志服务&#xff08;Log Tank Service&#xff0c;简称 LTS&#xff09;&#xff0c;用于收集来自主机和云服务的日志数据&#xff0c;通过海量日志数据的分析与处理&#xff0c;可以将云服务和应用程序的可用性和性能最大化&#xff0c;为您提供实时、…...

编程日记 2024/10/5 7:55:53

Python--加载Hugging Face模型文件异常处理

尝试加载 Hugging Face 模型的配置文件时&#xff0c;无法从 https://huggingface.co 获取所需的 config.json 文件。这个错误通常是由于网络连接问题、访问受限或路径配置错误导致的。让我们一步步分析并解决这个问题。 可能原因及解决方案&#xff1a; 网络连接问题&#xf…...

编程日记 2024/10/5 7:50:49

补码加/减运算的具体示例

补码加法运算示例 示例&#xff1a;计算两个十进制数的和&#xff0c;35 18&#xff0c;假设使用8位二进制表示。 1、求原码&#xff1a; 35的原码&#xff1a;00100011 18的原码&#xff1a;00010010 2、求补码&#xff08;对于正数&#xff0c;补码与原码相同&#xff0…...

编程日记 2024/10/5 7:48:47

macOS编译和运行prometheus2.54

欢迎访问我的GitHub 这里分类和汇总了欣宸的全部原创(含配套源码)&#xff1a;https://github.com/zq2599/blog_demos 本篇概览 本文详述了在macOS(M2芯片)上编译和运行prometheus2.54版本的过程&#xff0c;以及安装node_exporter和grafana并使用prometheus指标进行展示 本地…...

编程日记 2024/10/5 7:45:44

flume系列之：flume jmx页面导出flume、java进程等全部指标

flume系列之：flume jmx页面导出flume、java进程等全部指标 一、需求背景二、完整的jmx指标信息三、修改jmx指标导出规则四、启动jmx导出程序一、需求背景 目前jmx页面指标只导出了flume相关的指标，现在需要导出java相关的指标二、完整的jmx指标信息 主要有flume指标java进程指…...

编程日记 2024/10/5 7:43:42

（17）MATLAB使用伽马（gamma）分布生成Nakagami-m分布的方法1

文章目录 前言一、使用伽马分布生成Nakagami分布随机变量的方法一二、MATLAB仿真代码后续 前言 MATLAB在R2013a版本中引入Nakagami分布对象&#xff0c;可以用来生成Nakagami随机变量。但是在更早的MATLAB版本中&#xff0c;并没有可以直接生成 Nakagami分布的随机变量的内置的…...

编程日记 2024/10/5 7:42:41

NFT 是什么？

NFT 是什么？ NFT，全称Non-Fungible Token，即“非同质化代币”，是一种基于区块链技术的独特数字资产。NFT的核心特性在于其唯一性、不可分割性和不可替代性，这使其与传统的加密货币（如比特币、以太坊等）形成了鲜明的对比。比特币等加密货币是同质化的，每个单位之间可以…...

编程日记 2024/10/5 7:40:38

mysql的学习

垂直连接union join是水平连接&#xff0c;UNION 是垂直连接&#xff0c;它是把两张表的结果集按列堆叠&#xff0c;行数增加了&#xff0c;但列数保持不变。 UNION 垂直连接的作用 在 MySQL 中&#xff0c;UNION 可以将两个具有相同列数且列数据类型兼容的查询结果合并在一…...

编程日记 2024/10/5 7:39:37

微服务之间的相互调用的几种常见实现方式对比

目录 微服务之间的相互调用的几种实现方式 一、HTTP HTTP/RESTful API调用工作原理 二、RPC 设计理念与实现方式 协议与传输层 RPC远程调用工作原理 应用场景与性能考量 特点 三、Feign 设计理念与实现方式 协议与传输层 Feign调用的基本流程 Feign调用的工作原理…...

编程日记 2024/10/5 7:37:35

FPGA时序分析和约束学习笔记-（1、FPGA基本原理）

FPGA时序分析和约束学习笔记-&#xff08;1、FPGA基本原理&#xff09; Field现场Programmable可编程Gate门Array阵列 1、FPGA基本资源组成 可编程逻辑功能块&#xff08;logic elements &#xff0c;缩写LE&#xff09; 片内互联线&#xff08;interconnect&#xff0c;缩写…...

编程日记 2024/10/5 7:34:32

华为仓颉语言入门（9）：for-in表达式

for-in 表达式用于遍历序列，它会依次访问序列中的每个元素，直到遍历完成。它常用于处理列表、数组或其他集合类型，能够有效简化代码，减少重复劳动。其基本语法如下： for (循环变量 in 序列) {循环体 }在 for-in 表达式中，每次循环都会检查是否遍历了序列中的所有元素。如…...

编程日记 2024/10/5 7:30:27

Vue3中使用axios

Promise介绍 同步代码与异步代码 安装并引入axios npm install axios 此时package.json里面就多了axios依赖 引入axios 获取数据 Axios GET参数构成&#xff1a;axios.get(url,{config{},…{}…}) url: 字符串&#xff1a;目标服务器的地址&#xff0c;如 https://api.examp…...

编程日记 2024/10/5 7:29:27

国创——VR虚拟陪伴

VR虚拟陪伴 1.技术基础&#xff1a;利用VR技术创建虚拟人物&#xff0c;实现与用户的互动。 2.功能实现&#xff1a;在用户等待就诊或无聊时&#xff0c;可以启动VR虚拟陪伴功能&#xff0c;与虚拟人物进行聊天、唱歌等互动&#xff0c;缓解用户的紧张情绪。 3.创新点&#…...

编程日记 2024/10/5 7:28:26

【Android 源码分析】Activity生命周期之onPause

忽然有一天&#xff0c;我想要做一件事&#xff1a;去代码中去验证那些曾经被“灌输”的理论。                                                                                  – 服装…...

编程日记 2024/10/5 7:27:25

​IAR全面支持国科环宇AS32X系列RISC-V车规MCU

全球领先的嵌入式系统开发软件解决方案供应商IAR与北京国科环宇科技股份有限公司&#xff08;以下简称”国科环宇”&#xff09;联合宣布&#xff0c;最新版本IAR Embedded Workbench for RISC-V将全面支持国科环宇AS32X系列RISC-V MCU&#xff0c;双方将共同助力中国汽车行业开…...

编程日记 2024/10/5 7:26:24

Java题集（从入门到精通）04

此系列文章收录大量Java经典代码题&#xff08;也可以算是leetcode刷题指南&#xff09;&#xff0c;希望可以与大家一起努力学好Java。3、2、1&#xff0c;请看&#xff01; 目录 一、北京地铁计价程序 二、人名币兑换 三、各位数字之和 一、北京地铁计价程序 【问题描述…...

编程日记 2024/10/5 7:25:23

《西北师范大学学报 (自然科学版)》

《西北师范大学学报》(自然科学版) (CN 62-1087/N, ISSN 1001-988X)是甘肃省教育厅主管、西北师范大学主办的综合性自然科学学术期刊&#xff0c;1942年3月创刊&#xff0c;双月刊&#xff0c;逢单月15日出版。主要刊登全国高校和科研院所在数学、计算机与信息科学、物理学、化…...

编程日记 2024/10/5 7:24:22

Oracle SQL语句没有过滤条件，究竟是否会走索引？？

答案是&#xff1a;可能走索引也可能不走索引&#xff0c;具体要看列的值可不可为null&#xff0c;Oracle不会为所有列的nullable属性都为Y的sql语句走索引。 例子&#xff1a; create table t as select * from dba_objects; CREATE INDEX ix_t_name ON t(object_id, objec…...

编程日记 2024/10/5 7:21:19