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

Ajax入门+aixos+HTTP协议

news 文章来源：https://blog.csdn.net/Nianxi1031/article/details/132248806 2025/4/5 1:12:51

一.Ajax入门

概念:AJAX是浏览器与服务器进行数据通信的技术

axios使用:

引入axios.js
使用axios函数:传入配置对象,再用.then回调函数接受结果,并做后续处理

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>01.axios使用</title></head><body><p class="my-p"></p><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>axios({url:'https://hmajax.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>')})</script></body>
</html>

二.URL

1.概念

概念:统一资源定位符,简称网址,用于访问网络上的资源

http协议:超文本传输协议,规定浏览器和服务器之间传输数据的格式
域名:标记服务器在互联网中方位
资源路径:标记资源在服务器下的具体位置

2.URL查询参数

定义:浏览器提供给服务器的额外信息,让服务器返回浏览器想要的数据

3.axios-查询参数

语法:使用axios提供的params选项

注意:axios在运行时把参数名和值,会拼接到url?参数名=值

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>03.查询参数</title></head><body><p></p><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>axios({url: 'https://hmajax.itheima.net/api/city',//查询参数params: {pname: '辽宁省'}}).then(result => {console.log(result.data.list)document.querySelector('p').innerHTML = result.data.list.join('<br>')})</script></body>
</html>

三.案例_地区查询

<!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>/*获取地区列表: http://hmajax.itheima.net/api/area查询参数:pname: 省份或直辖市名字cname: 城市名字*///目标:根据省份和城市名字,查询地区列表//1.查询按钮-点击事件document.querySelector('.sel-btn').addEventListener('click',() =>{//2.获取省份和城市名字let pName = document.querySelector('.province').valuelet cName = document.querySelector('.city').value//3.基于axios请求地区列表数据axios({url:'http://hmajax.itheima.net/api/area',params:{pname: pName,cname: cName}}).then(result =>{//console.log(result)//4.把数据转成li标签插入到页面上let list = result.data.listconsole.log(list)let theLi = list.map(areaName => `<li class="list-group-item">${areaName}</li>`).join('')console.log(theLi)document.querySelector('.list-group').innerHTML = theLi})})</script>
</body></html>

注意:let theLi = list.map(areaName => `<li class="list-group-item">${areaName}</li>`).join('')

这段代码中用的是反引号

反引号（`）是用于创建模板字符串的特殊字符

四.常用请求方法和数据提交

1.请求方法

请求方法:对服务器资源,要执行的操作

2. axios请求配置

url:请求的URL网址
method:请求的方法,GET可以省略(不区分大小写)
data:提交数据

3.数据提交-注册账号

需求:通过axios提交用户名和密码,完成注册功能

请求方法:POST

参数名:

username用户名(中英文和数字组成,最少8位)

password密码(最少6位)

<!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>05.常用请求方法和数据提交</title>
</head><body><button class="btn">注册用户</button><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><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:'itheima777',password:'123456'}}).then(result =>{console.log(result)})})</script>
</body></html>

注意:数据提交之后服务器上就已经存在了,再次运行会报错

五.axios错误处理

场景:在上面的案例中再次注册相同的账号,会遇到报错信息

处理:用更直观的方式,给普通用户展示错误信息

注册案例,重复注册时通过弹框提示用户错误原因

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

<!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>05.常用请求方法和数据提交</title>
</head><body><button class="btn">注册用户</button><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>/*注册用户: http://hmajax.itheima.net/api/register请求方法: POST参数名:username: 用户名 (中英文和数字组成, 最少8位)password: 密码 (最少6位)目标: 点击按钮, 通过axios提交用户和密码, 完成注册需求:使用axios错误处理语法,拿到报错信息,弹框反馈给用户*/document.querySelector('.btn').addEventListener('click',() => {axios({url: 'http://hmajax.itheima.net/api/register',//指定请求方法method:'post',//提交数据data:{username:'itheima777',password:'123456'}}).then(result =>{//成功console.log(result)}).catch(error =>{//失败//处理错误信息console.log(error)console.log(error.response.data.messag)alert(error.response.data.message)})})</script>
</body></html>

六.HTTP协议-请求报文

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

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

1.请求报文的格式

请求报文的组成部分有:

请求行:请求方法,URL,协议
请求头:以键值对的格式携带的附加信息,比如:Content-Type
空行:分隔请求头,空行之后的是发送服务器的资源
请求体:发送的资源

2.请求报文-错误排查

七.HTTP协议-响应报文

响应报文:服务器按照HTTP协议要求的格式,返回给浏览器的内容

响应行(状态行):协议,HTTP响应状态码,状态信息
响应头:以键值对的格式携带的附加信息,比如: Content-Type
空行:分隔响应头,空行之后是服务器返回的资源
响应体:返回的资源

HTTP响应状态码:用来表明请求是否成功完成

比如:404(服务器找不到资源)

八.接口文档

接口文档:由后端提供的描述接口的文章

接口:使用AJAX和服务器通讯时,使用的URL,请求方法,以及参数

九.form-serialize插件

作用:快速收集表单元素的值

语法:

使用serialize函数，快速收集表单元素的值
参数1：要获取哪个表单的数据

表单元素设置name属性，值会作为对象的属性名
建议name属性的值，最好和接口文档参数名一致

参数2：配置对象
hash 设置获取数据结构

- true：JS对象（推荐）一般请求体里提交给服务器
- false: 查询字符串

empty 设置是否获取空值

- true: 获取空值（推荐）数据结构和标签结构一致
- false：不获取空值

Ajax入门+aixos+HTTP协议

一.Ajax入门概念:AJAX是浏览器与服务器进行数据通信的技术 axios使用: 引入axios.js使用axios函数:传入配置对象,再用.then回调函数接受结果,并做后续处理 <!DOCTYPE html> <html><head><meta charset"utf-8"><title>01.axios使用…...

编程日记 2023/8/19 19:17:47

conda创建虚拟环境

创建虚拟环境是在计算机上设置一个独立的空间，用于安装和运行特定版本的软件和依赖项，以避免与系统其他部分的冲突。创建虚拟环境： conda create --name myenv python3.8 这将创建一个名为myenv的虚拟环境，并安装Python 3.8版本。…...

编程日记 2023/8/19 19:16:46

Golang服务的请求调度

文章目录 1. 写在前面2. SheddingHandler的实现原理3. 相关方案的对比4. 小结 1. 写在前面最近在看相关的Go服务的请求调度的时候，发现在gin中默认提供的中间件中，不含有请求调度相关的逻辑中间件，去github查看了一些服务框架，发…...

编程日记 2023/8/19 19:15:45

Jenkins的流水线启动jar后未执行问题处理

现象在流水线里配置了启动脚本例如，nohup java -jar xxx.jar >nohup.out 2>&1 & 但是在服务器发现服务并未启动,且nohup日志里没输出日志,这样的原因是jenkins在执行完脚本后，就退出了这个进程。在启动脚本执行jar命令的上一步加入以下…...

编程日记 2023/8/19 19:14:44

智慧工地平台工地人员管理系统可视化大数据智能云平台源码

智慧工地概述： 智慧工地管理平台是以物联网、移动互联网技术为基础，充分应用大数据、人工智能、移动通讯、云计算等信息技术，利用前端信息采通过人机交互、感知、决策、执行和反馈等，实现对工程项目內人员、车辆、安全、设备、材…...

编程日记 2023/8/19 19:13:42

外包干了2个月测试，技术退步明显...

先说一下自己的情况，大专生，18年通过校招进入湖南某软件公司，干了接近4年的功能测试，今年年初，感觉自己不能够在这样下去了，长时间呆在一个舒适的环境会让一个人堕落!而我已经在一个企业干了四年的功能测试…...

编程日记 2023/8/19 19:12:40

神经网络基础-神经网络补充概念-19-向量化实现的解释

概念向量化是一种优化技术，通过使用数组操作代替显式的循环，可以大大提高代码的性能和效率。在机器学习和数据分析领域，向量化是一种常见的实践，它允许你在处理大量数据时更快地进行计算。一般操作数组操作：向量…...

编程日记 2023/8/19 19:11:37

四层和七层负载均衡的区别

一、四层负载均衡四层就是ISO参考模型中的第四层。四层负载均衡器也称为四层交换机，它主要时通过分析IP层和TCP/UDP层的流量实现的基于“IP端口”的负载均衡。常见的基于四层的负载均衡器有LVS、F5等。以常见的TCP应用为例，负载均衡器在接收到第一个来…...

编程日记 2023/8/19 19:10:34

Scala 如何调试隐式转换--隐式转换代码的显示展示

方法1 在需要隐式转换的地方，把需要的参数显示的写出。略方法2，查看编译代码在terminal中利用 scalac -Xprint:typer xxx.scala方法打印添加了隐式值的代码示例。对于复杂的工程来说，直接跑到terminal执行 scalac -Xprint:typer xxx.…...

编程日记 2023/8/19 19:09:33

使用系统：WSL2 —— Kali(Microsoft Store) 命令列表 rustup target list # 当前官方支持的构建目标架构列表 rustup target add aarch64-unknown-linux-gnu # 添加目标架构sudo apt-get install gcc-13-aarch64-linux-gnu gcc-13-aarch64-linux-gnu # 下载目标工具…...

编程日记 2023/8/19 19:08:32

算法与数据结构（二十三）动态规划设计：最长递增子序列

注：此文只在个人总结 labuladong 动态规划框架，仅限于学习交流，版权归原作者所有； 也许有读者看了前文动态规划详解，学会了动态规划的套路：找到了问题的「状态」，明确了 dp 数组/函数的含义&a…...

编程日记 2023/8/19 19:07:30

相机的位姿在地固坐标系ECEF和ENU坐标系的转换

在地球科学和导航领域，通常使用地心地固坐标系（ECEF，Earth-Centered, Earth-Fixed）和东北天坐标系（ENU，East-North-Up）来描述地球上的位置和姿态。如下图所示： 地心地固坐标ecef和…...

编程日记 2023/8/19 19:06:28

RFID技术助力汽车零配件装配产线，提升效率与准确性

随着科技的不断发展，越来越多的自动化设备被应用到汽车零配件装配产线中。其中，射频识别（Radio Frequency Identification，简称RFID）技术凭借其独特的优势，已经成为了这一领域的重要技术之一。本文将介绍RF…...

编程日记 2023/8/19 19:05:26

应用高分辨率 GAN 对扰动文档图像去扭曲的深度Python实践

1. 引言随着技术的不断发展，图像处理在各种场景中的应用也变得越来越广泛。高分辨率 GAN (Generative Adversarial Network) 是近年来图像处理领域的热点技术，它能够生成极高分辨率的图像，与此同时，它也可以用于各种修复和增强任…...

编程日记 2023/8/19 19:04:25

【BASH】回顾与知识点梳理（二十六）

【BASH】回顾与知识点梳理二十六二十六. 二十一至二十五章知识点总结及练习26.1 总结26.2 模拟26.3 简答题该系列目录 --> 【BASH】回顾与知识点梳理（目录） 二十六. 二十一至二十五章知识点总结及练习 26.1 总结 Linux 操作系统上面&#xff0c…...

编程日记 2023/8/19 19:03:24

React下载文件的两种方式

React下载文件的两种方式 - 代码先锋网不知道有用没用看着挺整齐没试过 1、GET类型下载 download url > {const eleLink document.createElement(a);eleLink.style.display none;// eleLink.target "_blank"eleLink.href url;// eleLink.href record;d…...

编程日记 2023/8/19 19:02:23

python入门知识：分支结构

前言嗨喽，大家好呀~这里是爱看美女的茜茜呐 1.内容导图 👇 👇 👇 更多精彩机密、教程，尽在下方，赶紧点击了解吧~ python资料、视频教程、代码、插件安装教程等我都准备好了，直接在文末名片自…...

编程日记 2023/8/19 19:01:22

DNS协议及其工作原理

DNS是域名系统（Domain Name System）的缩写，它是一种用于将域名转换为IP地址的分布式数据库系统。它是因特网的基石，能够使人们通过域名方便地访问互联网，而无需记住复杂的IP地址。 DNS的历史可以追溯到1983年&#xf…...

编程日记 2023/8/19 19:00:21

调用被fishhook的原函数

OC类如果通过runtime被hook了，可以通过逆序遍历方法列表的方式调用原方法。那系统库的C函数被fish hook了该怎么办呢？ 原理和OC类异曲同工，即通过系统函数dlopen()获取动态库，以动态库为参数通过系统函数dlsym()即可获取目标系统…...

编程日记 2023/8/19 18:59:20

java语言B/S架构云HIS医院信息系统源码【springboot】

医院云HIS全称为基于云计算的医疗卫生信息系统( Cloud- Based Healthcare Information System)，是运用云计算、大数据、物联网等新兴信息技术，按照现代医疗卫生管理要求，在一定区域范围内以数字化形式提供医疗卫生行业数据收集、存储、传递、…...

编程日记 2023/8/19 18:58:18

go文件基本操作

一、文件读操作文件内容如下： 水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植…...

编程日记 2023/8/19 18:57:17

每日一学——应用层

以下是一份关于应用层协议的学习资料： DNS (Domain Name System)：DNS是互联网上最常用的应用层协议之一，它将域名转换为对应的IP地址。你可以了解DNS的工作原理、域名解析过程和常见的DNS记录类型。 DHCP (Dynamic Host Configuration Proto…...

编程日记 2023/8/19 18:56:14

blender的快捷键记录

按键作用备注R旋转物体移动、旋转或缩放物体时，按下X、Y或Z键：按X、Y或Z轴方向移动、旋转或缩放S缩放物体G移动物体TAB键切换为编辑模式CTRL A弹出应用菜单物体模式旋转缩放后应用旋转与缩放，再进入编辑模式SHIFT 鼠标右键移动游标位置SHIF…...

编程日记 2023/8/19 18:55:12

3D- vista:预训练的3D视觉和文本对齐Transformer

论文：https://arxiv.org/abs/2308.04352 代码: GitHub - 3d-vista/3D-VisTA: Official implementation of ICCV 2023 paper "3D-VisTA: Pre-trained Transformer for 3D Vision and Text Alignment" 摘要三维视觉语言基础(3D- vl)是一个新兴领域&…...

编程日记 2023/8/19 18:54:11

SAP ABAP 直接把内表转换成PDF格式（smartform的打印函数输出OTF格式数据）

直接上代码： REPORT zcycle055.DATA: lt_tab TYPE TABLE OF zpps001. DATA: ls_tab TYPE zpps001.ls_tab-werks 1001. ls_tab-gamng 150.00. ls_tab-gstrp 20201202. ls_tab-aufnr 000010000246. ls_tab-auart 标准生产. ls_tab-gltrp 20201205. ls_tab-matn…...

编程日记 2023/8/19 18:53:09

侯捷 C++ part2 兼谈对象模型笔记——7 reference、const、new/delete

7 reference、const、new/delete 7.1 reference x 是整数，占4字节；p 是指针占4字节（32位）；r 代表x，那么r也是整数，占4字节 int x 0; int* p &x; // 地址和指针是互通的 int& r x;…...

编程日记 2023/8/19 18:52:08

C++学习笔记总结练习：primer 学习日志

文章目录针对自己的引言学习内容c语言基础知识1.为什么要声明变量2.cout ,cin3.c 不容许一个函数定义嵌套到另一个函数的定义中。4.编译指令using5.c基本类型长度6.在定义常量时尽可能使用const 关键字而不用#define9.前缀递增符与后缀递增符的区别10.c中的cctype库11.c 中的s…...

编程日记 2023/8/19 18:51:07