Ajax （1）
什么是Ajax：
浏览器与服务器进行数据通讯的技术，动态数据交互
axios库地址：
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>如何使用呢？ 我们现有个感性的认识
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>axios({url: 'http://hmajax.itheima.net/api/province'}).then(result => {console.log(result)console.log(result.data.list)})</script>
获取如下：
展示到页面：
<body><p></p><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>axios({url: 'http://hmajax.itheima.net/api/province'}).then(result => {const p=document.querySelector('p')p.innerHTML=result.data.list.join('<br>')})</script>
</body>
认识URL
URL是统一资源定位符，俗称网址，访问网络资源
组成： 协议、域名、资源路径
http协议：超文本传输协议，规定服务器和浏览器之间传输数据的格式
域名：标记服务器在互联网中的方位
资源路径：标记资源在服务器下具体位置
URL查询参数
浏览器提供给服务器的额外信息，让服务器返回浏览器想要的数据
语法：
http://xxx.com/xxx/xxx?参数名1=值1&参数名2=值2
axios-查询参数
语法： 使用axios提供的params选项（拿数据时的查询参数）
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>axios({url: 'http://hmajax.itheima.net/api/city',params: {pname: '河北省'}}).then(result => {console.log(result)})</script>axios原码在运行时把参数名自动拼接到url上
地区查询：
<!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, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"><title>~</title><link rel="shortcut icon" href="https://www.bilibili.com/favicon.ico"><link rel="stylesheet" href="css/初始化表.css"><link rel="stylesheet" href="bootstrap\css\bootstrap.min.css"><meta name="keywords" content="..." /><style>/*写代码时始终要考虑权重问题！*/@font-face {font-family: 'icomoon';src: url('fonts/icomoon.eot?au9n7q');src: url('fonts/icomoon.eot?au9n7q#iefix') format('embedded-opentype'),url('fonts/icomoon.ttf?au9n7q') format('truetype'),url('fonts/icomoon.woff?au9n7q') format('woff'),url('fonts/icomoon.svg?au9n7q#icomoon') format('svg');font-weight: normal;font-style: normal;font-display: block;}.center-block {display: block;margin-left: auto;margin-right: auto;width: 500px;}</style>
</head><body><div class="center-block"><form class="form-horizontal"><div class="form-group"><label for="inputEmail3" class="col-sm-2 control-label">Province</label><div class="col-sm-10"><input type="text" class="form-control input1" id="inputEmail3" placeholder="Province"></div></div><div class="form-group"><label for="inputPassword3" class="col-sm-2 control-label">City</label><div class="col-sm-10"><input type="text" class="form-control input2" id="inputPassword3" placeholder="City"></div></div><div class="form-group"><div class="col-sm-offset-2 col-sm-10"></div></div><div class="form-group"><div class="col-sm-offset-2 col-sm-10"><button class="btn btn-default" type="button">查询</button></div></div></form><p>地区列表：</p><ul class="list-group"></ul></table></div><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>const input1 = document.querySelector('.input1')const input2 = document.querySelector('.input2')const btn = document.querySelector('.btn')btn.addEventListener('click', () => {let pname = input1.valuelet cname = input2.valueaxios({url: 'http://hmajax.itheima.net/api/area',params: {pname: pname,cname: cname}}).then(result => {let list = result.data.listlet str = list.map(item => `<li class="list-group-item">${item}</li>`).join('')console.log(str)document.querySelector('.list-group').innerHTML = str})})</script>
</body></html>
常用请求方法
资源的操作：
get：获取数据
post：提交数据
method：请求方法，get可以省略
data：提交数据
<script>axios({url: 'http://hmajax.itheima.net/api/register',method:'post',data: {username: 'qwertyu123',password: '123456'}}).then(result => {console.log(result)})</script>
axios错误处理
语法：
在then后通过 . （点）语法调用catch方法，传入回调函数并定义形参
<script>axios({url: 'http://hmajax.itheima.net/api/register',method:'post',data: {username: 'qwertyu123',password: '123456'}}).then(result => {console.log(result)}).catch(error=>{alert(error.response.data.message)})</script>
浏览器是如何把内容发送给服务器的？
这与请求报文有关
HTTP协议-请求报文
http格式规定了浏览器发送及浏览器返回内容的格式
请求报文：浏览器按照http协议要求的格式，发送给服务器的内容
请求报文的组成：
请求行：请求方法（如post），URL，协议
请求头：以键值对的格式携带的附加信息，如：Content-Type
空格：分隔请求头，空行之后是发送给服务器的资源
请求体：发送到资源
在浏览器中可以看到这些内容
响应报文
响应报文：服务器按照http协议要求的格式，返回给浏览器的内容
响应报文的组成：
响应行（状态行）：协议，http响应状态码，状态信息
响应头：以键值对的格式携带的附加信息，如：Content-Type
空格：分隔响应头，空行之后是服务器返回的资源
响应体：返回的资源
http响应状态码
用来表明请求是否成功完成
2xx :请求成功
4xx:客户端错误
404：服务器找不到资源
接口
在使用AJAX与后端通讯，使用的URL，请求方法，以及参数
登录界面案例：
<style>/*写代码时始终要考虑权重问题！*/@font-face {font-family: 'icomoon';src: url('fonts/icomoon.eot?au9n7q');src: url('fonts/icomoon.eot?au9n7q#iefix') format('embedded-opentype'),url('fonts/icomoon.ttf?au9n7q') format('truetype'),url('fonts/icomoon.woff?au9n7q') format('woff'),url('fonts/icomoon.svg?au9n7q#icomoon') format('svg');font-weight: normal;font-style: normal;font-display: block;}.form-control {width: 400px;}.btn-block {width: 100px;}.alert {width: 400px;height: 50px;opacity: 0;}</style>
</head><body><div class="container"><form class="form-signin"><h2 class="form-signin-heading">Please sign in</h2><div class="alert " role="alert">...</div><label for="input" class="sr-only">Username</label><input type="text" id="input" class="form-control username" placeholder="Username" required autofocus><label for="inputPassword" class="sr-only">Password</label><input type="password" id="inputPassword" class="form-control password" placeholder="Password" required><div class="checkbox"><label><input type="checkbox" value="remember-me"> Remember me</label></div><button class="btn btn-lg btn-primary btn-block" type="button">Sign in</button></form></div><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>const btn = document.querySelector('.btn')const username = document.querySelector('.username')const password = document.querySelector('.password')const Alert = document.querySelector('.alert')function MyAlert() {Alert.style.opacity = 1if (username.value.length < 8 || password.value.length < 6) {Alert.classList.remove('alert-success')Alert.classList.add('alert-danger')Alert.innerHTML = '错误！'}else {Alert.classList.remove('alert-danger')Alert.classList.add('alert-success')Alert.innerHTML = '登录成功'}return false}btn.addEventListener('click', function () {let flag = MyAlert()setTimeout(() => {Alert.style.opacity = 0}, 2000)if (!flag){return}axios({url: 'http://hmajax.itheima.net/api/login',method: 'post',data: {username: username.value,password: password.value}}).then(result => {console.log(result)}).catch(error => {})})</script></body>
form-serialize.js
可以快速获取表单元素，通过解构对象获得用户信息
相关文章：
Ajax （1）
什么是Ajax： 浏览器与服务器进行数据通讯的技术，动态数据交互 axios库地址： <script src"https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> 如何使用呢？ 我们现有个感性的认识 <scr…...
Python基础语法：基本数据类型（数字类型和布尔类型）
在我们的日常生活中，经常会用到数字，所以数字（numbers）是 pytthon 中的一个基本数据类型。在 python 里面啊，numbers 这种数据类型是一个大类，在 numbers 这个大类下面有整型、浮点型（小数&…...
springboot 下载 Excel 文件的 Controller 层案例
环境 pom.xml 中 springboot版本： <parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.7.15</version></parent>Excel 文件依赖： &l…...
RabbitMQ队列
RabbitMQ队列 1、死信的概念 先从概念解释上搞清楚这个定义，死信，顾名思义就是无法被消费的消息，字面意思可以这样理解，一般来说,producer将消息投递到broker或者直接到queue里了，consumer 从 queue取出消息进行消…...
Day12：信息打点-Web应用源码泄漏开源闭源指纹识别GITSVNDS备份
目录 开源-CMS指纹识别源码获取方式 闭源-习惯&配置&特性等获取方式 闭源-托管资产平台资源搜索监控 思维导图 章节点 Web：语言/CMS/中间件/数据库/系统/WAF等 系统：操作系统/端口服务/网络环境/防火墙等 应用：APP对象/API接口/微…...
使用正确的技术和项目管理工具来定义项目范围
根据 PMI 的统计，34% 的项目会出现范围蔓延：悄悄增加超出范围的活动，威胁到利润空间、项目成功率和客户满意度。 预防和控制范围蔓延的方法之一，是首先明确界定项目范围。 项目范围是项目规划、资源调度和变更管理的重要步骤。然…...
【C++】类型转换和IO流
目录 C语言中的类型转换 C eplicit && volatitle eplicit volatile C强制类型转换 static_cast(相关类型) reinterpret_cast(不相关类型） const_cast（去掉const属性） dynamic_cast RTTI（了解） IO流 …...
leetCode刷题 5.最长回文子串
目录 1. 思路 2. 解题方法 3. 复杂度 4. Code 题目： 给你一个字符串 s，找到 s 中最长的回文子串。 如果字符串的反序与原始字符串相同，则该字符串称为回文字符串。 示例 1： 输入：s "babad" 输出&#x…...
计算机组成原理面试题
计算机组成原理是计算机科学的基础课程之一，涉及计算机系统的基本结构和工作原理。以下是一些可能出现在面试中的计算机组成原理相关题目： 1. **什么是冯诺依曼体系结构？** - 冯诺依曼体系结构是一种计算机组织架构，它将程序指…...
「Mybatis深入三」：高级查询-模糊查询
一、需求 根据username 模糊查询user 表 二、代码演示 1、方式1 数据库环境 CREATE DATABASE mybatis_db; USE mybatis_db; CREATE TABLE user (id INT(11) NOT NULL AUTO_INCREMENT,username VARCHAR(32) NOT NULL COMMENT 用户名称,birthday DATETIME DEFAULT NULL COMMEN…...
LabVIEW管道缺陷智能检测系统
LabVIEW管道缺陷智能检测系统 管道作为一种重要的输送手段，其安全运行状态对生产生活至关重要。然而，随着时间的推移和环境的影响，管道可能会出现老化、锈蚀、裂缝等多种缺陷，这些缺陷若不及时发现和处理，将严重威胁到…...
java在cmd中乱码的问题解决
本文深入探讨了在使用 Java 命令行（cmd）时可能出现的中文乱码问题，并提供了两种解决方案。首先，通过临时的方式，用户可以执行命令 chcp 936 选择字符集，然后再运行 Java 命令，确保在选择字符集过…...
OpenHarmony教程指南—ArkUI中组件、通用、动画、全局方法的集合
介绍 本示例为ArkUI中组件、通用、动画、全局方法的集合。 本示例使用 Tabs容器组件搭建整体应用框架，每个 TabContent内容视图 使用 div容器组件 嵌套布局，在每个 div 中使用 循环渲染 加载此分类下分类导航数据，底部导航菜单使用 TabCont…...
第二证券|金价逼近历史高点 黄金股价值有望重估
经过两个多月的震荡后，黄金打响新一波攻势，期货商场价格已逼近前史高点。 有分析认为，虽然黄金价格短期已有显着涨幅，存在震荡或许，但中长时间看，跟着美联储钱银政策的转向，黄金价格仍有上行动…...
关于51单片机晶振定时问题
单片机中晶振频率为12MHZ的机器周期怎么算? 1、系统晶振频率是12M，则机器周期＝12／12＝1us； 2、定时1ms＝1＊1000＝1000us； 3、工作在方式1下：最大计数值是2&a…...
NoSQL--2.MongoDB配置（Windows版）
目录 2.MongdoDB配置 2.1 Windows环境下操作 2.1.1 注册MongDB Atlas： 2.1.2 MongoDB Community Server Download： 2.1.3 启动MondgoDB服务： 2.1.3.1 命令行参数的方式启动MongoDB服务： 2.1.3.2 使用配置文件方式启动Mongo…...
HTML静态网页成品作业(HTML+CSS)——安徽宣笔设计制作(5个页面)
🎉不定期分享源码，关注不丢失哦 文章目录 一、作品介绍二、作品演示三、代码目录四、网站代码HTML部分代码 五、源码获取 一、作品介绍 🏷️本套采用HTMLCSS，未使用Javacsript代码，共有6个页面。 🏷️想要…...
MySQL CTEs通用表表达式：进阶学习-递归查询
MySQL CTEs通用表表达式：进阶学习-递归查询 递归通用表表达式是其会引用自身的通用表表达式。 CTEs 递归通用表表达式补上了MySQL8之前无法使用递归查询的空白。在之前，递归查询需要使用函数等方法实现。 基础使用，请参考前文： …...
[Java安全入门]二.序列化与反序列化
一.概念 Serialization（序列化）是一种将对象以一连串的字节描述的过程；反序列化deserialization是一种将这些字节重建成一个对象的过程。将程序中的对象，放入文件中保存就是序列化，将文件中的字节码重新转成对象就是反…...
Dutree：Linux 文件系统磁盘使用追踪工具
在 Linux 系统中，对文件系统的磁盘使用情况进行跟踪和管理是至关重要的。dutree 是一个功能强大的工具，它能够以可视化的方式展示文件系统中的目录和文件的大小，帮助用户更好地了解磁盘空间的使用情况。本文将介绍 dutree 工具的使用方法、功…...
http和https的区别是什么？
–前言 传输信息安全性不同、连接方式不同、端口不同、证书申请方式不同 一、传输信息安全性不同 1、http协议：是超文本传输协议，信息是明文传输。如果攻击者截取了Web浏览器和网站服务器之间的传输报文，就可以直接读懂其中的信息。 2、h…...
学习Android的第十九天
目录 Android ExpandableListView 分组列表 ExpandableListView 属性 ExpandableListView 事件 ExpandableListView 的 Adapter 范例 参考文档 Android ViewFlipper 翻转视图 ViewFlipper 属性 ViewFlipper 方法 为 ViewFlipper 加入 View 例子：全屏幕可…...
C#上位机调试经验
1.使用Visual Studio的远程工具 因为上位机软件安装在工控机上，不方便调试。如果直接把代码放在工控机上，又不太安全。 可以在工控机上安装一个Visual Studio的远程工具，把随身带的笔记本电脑通过网线插在工控机上 这样可以在笔记本上使用…...
BUUCTF---[极客大挑战 2019]BabySQL1
1.这道题和之前做的几道题是相似的，这道题考的知识点更多。难度也比之前的大一些 2.尝试万能密码 or 1#发现过滤了or,使用1和1,发现他对单引号也进行了过滤。于是我尝试进行双写绕过，发现可以通过了。 3.由之前的做题经验可知，这道题会涉及到…...
0基础跨考计算机｜408保姆级全年计划
我也是零基础备考408！ 虽说是计算机专业，但是本科一学期学十几门,真的期末考试完脑子里什么都不进的...基本都是考前一周发疯学完水过考试...😅 想要零基础跨考可以直接从王道开始！跟教材一点一点啃完全没必要🥸 现在…...
C# 操作LiteDB
1、很简单的东西不废话，直接上图上代码。 2、NuGet程序中根据自己的项目版本安装LiteDB,如下图： 3、程序运行加过如下图： 4、程序代码如下： using System; using System.Collections.Generic; using System.Linq; using System…...
LeetCode 2917.找出数组中的 K-or 值：基础位运算
【LetMeFly】2917.找出数组中的 K-or 值：基础位运算 力扣题目链接：https://leetcode.cn/problems/find-the-k-or-of-an-array/ 给你一个下标从 0 开始的整数数组 nums 和一个整数 k 。 nums 中的 K-or 是一个满足以下条件的非负整数： 只有…...
MySQL窗口函数：从理论到实践
目录 1. ROW_NUMBER() 2. RANK() 3. DENSE_RANK() 4. NTILE(n) 5. LAG() 和 LEAD() 6. FIRST_VALUE() 和 LAST_VALUE() 总结 MySQL中的窗口函数（Window Functions）允许用户对一个结果集的窗口（或分区）执行计算，…...
Vue+SpringBoot打造考研专业课程管理系统
目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 数据中心模块2.2 考研高校模块2.3 高校教师管理模块2.4 考研专业模块2.5 考研政策模块 三、系统设计3.1 用例设计3.2 数据库设计3.2.1 考研高校表3.2.2 高校教师表3.2.3 考研专业表3.2.4 考研政策表 四、系统展示五、核…...
python基础第二天
世界杯小组赛成绩 注意： 1.循环 1.1while 1.2for 1.3 range 1.4 while else while 循环正常执行完才能执行else语句...