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

AJAX 学习笔记（Day1）

news 2026/4/9 8:57:28

「写在前面」

本文为黑马程序员 AJAX 教程的学习笔记。本着自己学习、分享他人的态度，分享学习笔记，希望能对大家有所帮助。

目录

  • 0 课程介绍
  • 1 AJAX 入门
    • 1.1 AJAX 概念和 axios 使用
    • 1.2 认识 URL
    • 1.3 URL 查询参数
    • 1.4 常用请求方法和数据提交
    • 1.5 HTTP协议-报文
    • 1.6 接口文档
    • 1.7 案例 - 用户登录
    • 1.8 form-serialize 插件

0 课程介绍

P1：https://www.bilibili.com/video/BV1MN411y7pw?p=1

alt

1 AJAX 入门

1.1 AJAX 概念和 axios 使用

P2：https://www.bilibili.com/video/BV1MN411y7pw?p=2

什么是 AJAX ?

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

比如：浏览器网页中，使用 AJAX技术（XHR对象）发起获取省份列表数据的请求，服务器代码响应准备好的省份列表数据给前端，前端拿到数据数组以后，展示到网页

alt

怎么用 AJAX ？

  1. 先使用 axios 库，与服务器进行 数据通信
  • 因为 axios 库语法简单，让我们有更多精力关注在与服务器通信上，而且后续 Vue，React 学习中，也使用 axios 库与服务器通信
  1. 再学习 XMLHttpRequest 对象的使用，了解 AJAX 底层原理

axios 使用

语法：

  1. 引入 axios.js：https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js
  2. 使用 axios 函数
  • 传入 配置对象
  • 再用 .then 回调函数接收结果，并做后续处理 
axios({
  url: '目标资源地址'
}).then((result) => {
  //对服务器返回的数据做后续处理
})

案例：

alt 
<!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>AJAX概念和axios使用</title>
</head>

<body>
  <!--
    axios库地址：https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js
    省份数据地址：http://hmajax.itheima.net/api/province

    目标: 使用axios库, 获取省份列表数据, 展示到页面上
    1. 引入axios库
  -->
  <p class="my-p"></p>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    // 2. 使用axios函数
    axios({
      url: 'http://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>

1.2 认识 URL

P3：https://www.bilibili.com/video/BV1MN411y7pw?p=3

什么是 URL ？

定义：

alt

例如：

alt

URL 的组成

alt

http 协议：超文本传输协议，规定浏览器和服务器之间传输数据的格式

alt

域名：标记服务器在互联网中方位

alt

资源路径：标记资源在服务器下的具体位置

alt

1.3 URL 查询参数

P4：https://www.bilibili.com/video/BV1MN411y7pw?p=4

什么是查询参数 ?

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

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

举例：查询河北省下属的城市列表，需要先把河北省传递给服务器

alt

axios 如何携带查询参数?

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

axios({
  url: '目标资源地址',
  params: {
    参数名: 值
  }
}).then(result => {
  // 对服务器返回的数据做后续处理
})

案例：获取“河北省”下属的城市列表，展示到页面

axios({
  url: 'http://hmajax.itheima.net/api/city',
  params: {
    pname: '河北省'
  }
}).then(result => {
  console.log(result.data.list)
})

案例：地区查询

P5：https://www.bilibili.com/video/BV1MN411y7pw?p=5

alt

1.4 常用请求方法和数据提交

P6：https://www.bilibili.com/video/BV1MN411y7pw?p=6

常用请求方法

请求方法：是一些固定单词的英文，例如：GET，POST，PUT，DELETE，PATCH（这些都是http协议规定的），每个单词对应一种对服务器资源要执行的操作

alt

前面我们获取数据其实用的就是 GET 请求方法，但是 axios 内部设置了默认请求方法就是 GET，我们就没有写

axios 请求配置

  • url：请求的 URL 网址
  • method：请求的方法， GET可以省略（不区分大小写）
  • data：提交数据 
axios({
  url: '目标资源地址',
  method: '请求方法',
  data: {
    参数名: 值
  }
}).then(result => {
  // 对服务器返回的数据做后续处理
})

案例：注册账号，提交用户名和密码到服务器保存

axios({
  url: 'http://hmajax.itheima.net/api/register',
  method: 'POST',
  data: {
    username: 'itheima007',
    password: '7654321'
  }
})

axios 错误处理

P7：https://www.bilibili.com/video/BV1MN411y7pw?p=7

如果注册相同的用户名，则会遇到注册失败的请求，也就是 axios 请求响应失败了，你会在控制台看到如图的错误：

alt

因为，普通用户不会去控制台里看错误信息，我们要编写代码拿到错误并展示给用户在页面上

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

axios({
  // ...请求选项
}).then(result => {
  // 处理成功数据
}).catch(error => {
  // 处理失败错误
})

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

axios({
  url: 'http://hmajax.itheima.net/api/register',
  method: 'post',
  data: {
    username: 'itheima007',
    password: '7654321'
  }
}).then(result => {
  // 成功
  console.log(result)
}).catch(error => {
  // 失败
  // 处理错误信息
  console.log(error)
  console.log(error.response.data.message)
  alert(error.response.data.message)
})

1.5 HTTP协议-报文

P8：https://www.bilibili.com/video/BV1MN411y7pw?p=8

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

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

alt

请求报文的组成部分有:

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

通过 Chrome 的网络面板查看请求报文:

alt

请求报文-错误排查

P9：https://www.bilibili.com/video/BV1MN411y7pw?p=9

alt

HTTP 协议-响应报文

P10：https://www.bilibili.com/video/BV1MN411y7pw?p=10

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

alt

响应报文的组成：

  1. 响应行（状态行）：协议、HTTP 响应状态码、状态信息
  2. 响应头：以键值对的格式携带的附加信息，比如：Content-Type
  3. 空行：分隔响应头，空行之后的是服务器返回的资源
  4. 响应体：返回的资源

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

比如：404（服务器找不到资源）

alt

通过 Chrome 的网络面板查看响应报文:

alt

1.6 接口文档

P11：https://www.bilibili.com/video/BV1MN411y7pw?p=11

接口文档：描述接口的文章（一般是后端工程师，编写和提供）

接口：指使用 AJAX 和 服务器通讯时，使用的 URL，请求方法，以及参数，例如：

AJAX阶段接口文档: https://apifox.com/apidoc/shared-1b0dd84f-faa8-435d-b355-5a8a329e34a8

alt

1.7 案例 - 用户登录

P12：https://www.bilibili.com/video/BV1MN411y7pw?p=12

P13：https://www.bilibili.com/video/BV1MN411y7pw?p=13

alt

1.8 form-serialize 插件

P14：https://www.bilibili.com/video/BV1MN411y7pw?p=14

P15：https://www.bilibili.com/video/BV1MN411y7pw?p=15

我们前面收集表单元素的值，是一个个标签获取的,如果一套表单里有很多很多表单元素，如何一次性快速收集出来呢？使用 form-serialize 插件提供的 serialize 函数就可以办到。

form-serialize 插件语法：

  1. 引入 form-serialize 插件到自己网页中
  2. 使用 serialize 函数
  • 参数1：要获取的 form 表单标签对象（要求表单元素需要有 name 属性-用来作为收集的数据中属性名）
  • 参数2：配置对象
    • hash：
      • true - 收集出来的是一个 JS 对象结构
      • false - 收集出来的是一个查询字符串格式
    • empty：
      • true - 收集空值
      • false - 不收集空值 
const form = document.querySelector('.example-form')
const data = serialize(form, { hash: true, empty: true })

「结束」
alt

本文由 mdnice 多平台发布

相关文章：

AJAX 学习笔记（Day1）

「写在前面」 本文为黑马程序员 AJAX 教程的学习笔记。本着自己学习、分享他人的态度&#xff0c;分享学习笔记&#xff0c;希望能对大家有所帮助。 目录 0 课程介绍 1 AJAX 入门 1.1 AJAX 概念和 axios 使用 1.2 认识 URL 1.3 URL 查询参数 1.4 常用请求方法和数据提交 1.5 HT…...

编程日记 2024/3/4 3:23:52

leetcode 740.删除并活得点数

这道题和打家劫舍得思路很像。 思路&#xff1a;首先我们看到题目的意思&#xff0c;就是说我们如果选择了一个数&#xff0c;那么它相邻的数就会不得选入&#xff0c;也就是删除。这就是上一个题那个相邻的家不能偷的问题呗&#xff01; 我们从那个地方转换一下&#xff0c;…...

编程日记 2024/3/4 3:22:51

寻找峰值[中等]

优质博文IT-BLOG-CN 一、题目 峰值元素是指其值严格大于左右相邻值的元素。给你一个整数数组nums&#xff0c;找到峰值元素并返回其索引。数组可能包含多个峰值&#xff0c;在这种情况下&#xff0c;返回 任何一个峰值 所在位置即可。 你可以假设nums[-1] nums[n] -∞。 你…...

编程日记 2024/3/4 3:20:50

【ESP32 IDF】key按键与EXTI中断

文章目录 前言一、按键的使用1.1 按键的简介1.2 读取按键的高低电平1.3 读取按键具体代码 二、中断二、EXIT外部中断2.1 EXIT外部中断简介2.2 外部中断基础知识2.3 设置外部中断注册外部中断服务函数设置触发方式添加中断函数 2.4 示例代码 总结 前言 在嵌入式系统开发中&…...

编程日记 2024/3/4 3:19:49

Find My运动相机|苹果Find My技术与相机结合，智能防丢，全球定位

运动相机设计用于在各种运动和极限环境中使用&#xff0c;如徒步、登山、攀岩、骑行、滑翔、滑雪、游泳和潜水等&#xff0c;它们通常具有防抖防震、深度防水和高清画质的特点&#xff0c;能够适应颠簸剧烈的环境&#xff0c;甚至可以承受一定程度的摔落&#xff0c;一些运动相…...

编程日记 2024/3/4 3:18:47

零拷贝技术深入分析

一、零拷贝 在前面的文章“深浅拷贝、COW及零拷贝”中对零拷贝进行过分析&#xff0c;但没有举例子&#xff0c;也没有深入进行展开分析。本文将结合实际的例程对零拷贝进行更深入的分析和说明。 在传统的IO操作中&#xff0c;以文件通过网络传输为例 &#xff0c;一般会经历以…...

编程日记 2024/3/4 3:16:44

Android 基础入门 基础简介

1. 观察App运行日志 2.Android 开发设计的编程语言 koltin Java c c 3.工程目录结构 4.Gradle 5.build.gradle 文件解析 plugins {id("com.android.application")//用了哪些插件 主配置文件版本控制 所以这里不用写版本 }android {namespace "com.tiger.myap…...

编程日记 2024/3/4 3:15:42

HUAWEI 华为交换机 配置基于VLAN的MAC地址学习限制接入用户数量 配置示例

组网需求 如 图 2-15 所示&#xff0c;用户网络 1 通过 LSW1 与 Switch 相连&#xff0c; Switch 的接口为 GE0/0/1 。用户网络2通过 LSW2 与 Switch 相连&#xff0c; Switch 的接口为 GE0/0/2 。 GE0/0/1 、 GE0/0/2 同属于 VLAN2。为控制接入用户数&#xff0c;对 VLAN2 进…...

编程日记 2024/3/4 3:14:40

编程笔记 Golang基础 042 文件处理

编程笔记 Golang基础 042 文件处理 一、文件处理二、Go语言文件处理创建文件和写入内容打开文件并按模式读写读取文件内容更高级的文件和IO操作改变文件权限目录操作 小结 一、文件处理 文件处理是指在计算机科学中&#xff0c;对存储在磁盘或其他持久性存储介质上的文件进行的…...

编程日记 2024/3/4 3:12:38

linuxlsof详解

lsof 是 List Open File 的缩写, 它主要用来获取被进程打开文件的信息&#xff0c;我们都知道&#xff0c;在Linux中&#xff0c;一切皆文件&#xff0c;lsof命令可以查看所有已经打开了的文件&#xff0c;比如: 普通文件&#xff0c;目录&#xff0c;特殊的块文件&#xff0c;…...

编程日记 2024/3/4 3:07:34

学习JAVA的第十二天（基础）

目录 算法 查找算法 基本查找&#xff08;顺序查找&#xff09; 二分查找&#xff08;折半查找&#xff09; 分块查找 排序算法 冒泡排序 选择排序 插入排序 快速排序 递归算法 算法 算法&#xff08;Algorithm&#xff09;是指解题方案的准确而完整的描述&#xff…...

编程日记 2024/3/4 3:06:33

Vector集合源码分析

Vector集合源码分析 文章目录 Vector集合源码分析一、字段分析二、方法分析三、总结 内容如有错误或者其他需要注意的知识点&#xff0c;欢迎指正或者探讨补充&#xff0c;共同进步。 一、字段分析 //用于存储该集合中的所有数据对象&#xff0c;所以是基于数组实现的 protec…...

编程日记 2024/3/4 3:05:32

Unity引擎中光源都有哪几种，都有什么作用

本文由 简悦 SimpRead 转码&#xff0c; 原文地址 mp.weixin.qq.com Unity 引擎为了实现游戏场景的明暗和光影效果&#xff0c;提供了四种类型的光源&#xff0c;分别是方向光&#xff08;Directional Lights&#xff09;、点光源&#xff08;Point Lights&#xff09;、聚光灯…...

编程日记 2024/3/4 3:04:25

C语言中结构体成员访问操作符的含义及其用法

1.直接访问操作符 用法&#xff1a;结构体名.成员名。 含义&#xff1a;直接访问结构体中的成员变量。 示例&#xff1a; #include<stdio.h> struct student {char name[20];int age; }; int main() {//定义了一个结构体数组arrstruct student arr[4] { {"cxk&q…...

编程日记 2024/3/4 3:02:23

Kubeadmin方式部署Calico网络模式的K8s集群

目录 1.环境准备 2.配置内核参数 3.配置ntp时间服务器 4.配置持久化日志目录 5.升级物理机内核 6.配置ipvs服务 7.安装docker 8.安装kubeadm、kubectl、kubelet 9.导入k8s组件基础镜像 10.k8s初始化配置 11.配置calico网络 12.完成部署 1.环境准备 ###方案中涉及的…...

编程日记 2024/3/4 3:01:22

sparse transformer 常见稀疏注意力

参考&#xff1a; https://zhuanlan.zhihu.com/p/259591644 主要就是降低transformer自注意力模块的复杂度 复杂度主要就是 Q K^T影响的&#xff0c;稀疏注意力就是在Q点乘K的转置这模块做文章 下列式一些sparse transformer稀疏注意力方法 a、transformer原始的 &#xff0…...

编程日记 2024/3/4 2:58:19

力扣 第 125 场双周赛 解题报告 | 珂学家 | 树形DP + 组合数学

前言 整体评价 T4感觉有简单的方法&#xff0c;无奈树形DP一条路上走到黑了&#xff0c;这场还是有难度的。 T1. 超过阈值的最少操作数 I 思路: 模拟 class Solution {public int minOperations(int[] nums, int k) {return (int)Arrays.stream(nums).filter(x -> x <…...

编程日记 2024/3/4 2:55:16

基于springboot+vue的人格障碍诊断系统

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、阿里云专家博主、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战&#xff0c;欢迎高校老师\讲师\同行交流合作 ​主要内容&#xff1a;毕业设计(Javaweb项目|小程序|Pyt…...

编程日记 2024/3/4 2:54:14

Go-知识struct

Go-知识struct 1. struct 的定义1.1 定义字段1.2 定义方法 2. struct的复用3. 方法受体4. 字段标签4.1 Tag是Struct的一部分4.2 Tag 的约定4.3 Tag 的获取 githupio地址&#xff1a;https://a18792721831.github.io/ 1. struct 的定义 Go 语言的struct与Java中的class类似&am…...

编程日记 2024/3/4 2:53:12

SpringMVC 学习（十一）之数据校验

目录 1 数据校验介绍 2 普通校验 3 分组校验 4 参考文档 1 数据校验介绍 在实际的项目中&#xff0c;一般会有两种校验数据的方式&#xff1a;客户端校验和服务端校验 客户端校验&#xff1a;这种校验一般是在前端页面使用 JS 代码进行校验&#xff0c;主要是验证输入数据…...

编程日记 2024/3/4 2:52:11

模数OPC社区在北京亦庄正式启航

打造AI创业“超级孵化器”&#xff0c;首批迎来20个创业团队入驻4月8日&#xff0c;在北京经济技术开发区&#xff08;简称“北京经开区”&#xff0c;又称“北京亦庄”&#xff09;举办的AI FUTURE北京亦庄AI未来大会上&#xff0c;一个全新的AI创业孵化空间——模数OPC&#…...

编程新知 2026/4/9 8:34:03

Linux硬盘分区管理

硬盘分区管理 大容量的硬盘&#xff0c;分区使用&#xff1a;C盘系统盘&#xff0c;D盘办公&#xff0c;E盘娱乐。 类似于&#xff1a;买了一个房子100平方&#xff0c;隔断&#xff1a;主卧、次卧1、次卧2、厨房、卫生间。识别硬盘设备接口类型设备命名示例说明SATA/SAS/USB/S…...

编程新知 2026/4/9 8:21:56

Android - 服务 Service

前台20s后台200s不执行玩就报ANR异常。 一、概念 没有界面在后台长期运行在主线程中的一个组件&#xff0c;后台运行的功能如果不放在 Service 里&#xff08;如在单例工具类里音乐播放器&#xff09;&#xff0c;APP切出去容易被系统回收。 1.1 Service 类型 后台服务 start…...

编程新知 2026/4/9 7:52:21

Java 并发原子类完全指南：Atomic 全家桶、CAS/JMM、ABA、LongAdder、源码阅读路线与经典实战

多线程编程中&#xff0c;count 这样简单的操作都不是线程安全的。用 synchronized 能解决问题&#xff0c;但锁会带来阻塞和上下文切换开销。java.util.concurrent.atomic 包提供了一套基于 CAS&#xff08;Compare-And-Swap&#xff09;的无锁并发工具&#xff0c;在“单变量…...

编程新知 2026/4/9 6:52:15

Git-RSCLIP多场景落地：生态环境监测中‘红树林退化’语义识别案例

Git-RSCLIP多场景落地&#xff1a;生态环境监测中"红树林退化"语义识别案例 1. 项目背景与需求 红树林作为重要的海岸带生态系统&#xff0c;具有防风消浪、净化水质、维持生物多样性等重要生态功能。然而近年来&#xff0c;由于人类活动和环境变化&#xff0c;全球…...

编程新知 2026/4/9 6:48:14

Pixel Epic · Wisdom Terminal 辅助MATLAB算法仿真与数据分析

Pixel Epic Wisdom Terminal 辅助MATLAB算法仿真与数据分析 1. 科研算法开发的效率痛点 科研人员和算法工程师经常面临这样的困境&#xff1a;脑子里有清晰的算法思路&#xff0c;却要花费大量时间在MATLAB代码实现上。从算法构思到可运行的仿真模型&#xff0c;中间隔着繁琐…...

编程新知 2026/4/9 6:00:44

程序员必备：优质源码下载网，打通学习、实战与毕设全链路

对于程序员而言&#xff0c;源码是成长路上最宝贵的“养分”——它承载着成熟的编程逻辑、规范的代码风格、先进的架构设计&#xff0c;更是连接理论学习与实际开发的核心桥梁。无论是入门新手想要快速上手、进阶开发者想要突破技术瓶颈&#xff0c;还是应届毕业生想要高效完成…...

编程新知 2026/4/9 5:25:54

Filter下固定块半导体设备PP精密加工案例 | 莱图加工程师实录

本次案例来自一家半导体微电子设备制造企业的委托加工需求&#xff0c;零件为Filter下固定块&#xff0c;作为莱图加承接的半导体设备零件加工项目之一&#xff0c;该零件在湿法工艺设备、晶圆清洗设备或化学液过滤系统中承担Filter组件的下部固定与支撑功能。Filter下固定块&a…...

编程新知 2026/4/9 5:09:43

STM32单片机低功耗模式与应用实践

1. STM32单片机低功耗模式深度解析作为一名嵌入式开发者&#xff0c;我经常遇到需要优化功耗的场景。STM32系列单片机提供了多种低功耗模式&#xff0c;合理使用这些模式可以显著延长电池供电设备的续航时间。本文将结合我多年的实战经验&#xff0c;详细剖析STM32F10xx系列的低…...

编程新知 2026/4/9 4:41:05

【清华代码熊】图解 Gemma 4 架构设计细节

&#x1f4cc; 本期图解 Google 开源Gemma 4 架构设计细节&#xff0c;其中端侧模型的架构上有很多值得一看的设计。...

编程新知 2026/4/9 2:01:46