AJAX 学习笔记（Day1）

news2024/11/16 9:28:08

「写在前面」

本文为黑马程序员 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 多平台发布

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1483720.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

arduino uno R3驱动直流减速电机（蓝牙控制）

arduino uno R3驱动直流减速电机（蓝牙控制）

此篇博客用于记录使用arduino驱动直流减速电机的过程&#xff0c;仅实现简单的功能&#xff1a;PID调速、蓝牙控制 1、直流减速电机简介2、DRV8833电机驱动模块简介3、HC-05蓝牙模块简介电机转动测试4、PID控制5、蓝牙控制电机 1、直流减速电机简介 我在淘宝购买的电机&#x…
阅读更多...
VMware安装Centos7详细过程

VMware安装Centos7详细过程

1.硬件软件准备 软件&#xff1a;VMware16 硬件&#xff1a;因为是在宿主机上运行虚拟化软件安装centos&#xff0c;所以对宿主机的配置有一定的要求。最起码I5CPU双核、硬盘500G、内存4G以上。 镜像&#xff1a;centos7,镜像下载地址centos安装包下载_开源镜像站-阿里云 2…
阅读更多...
华为数通方向HCIP-DataCom H12-821题库(多选题：21-40)

华为数通方向HCIP-DataCom H12-821题库(多选题：21-40)

第21题 管理员在配置 VRRP 时,下面哪些不是必须配置的? A.抢占模式 B.抢占延时 C.虚拟IP 地址 D.虚拟路由器的优先级 【参考答案】ABD 【答案解析】 VRRP的作用之一是提供一个虚拟的IP地址，用作默认网关，用来实现冗余和故障转移。因此，配置虚拟IP地址是必须的。华为设备vr…
阅读更多...
力扣1892 页面推荐Ⅱ

力扣1892 页面推荐Ⅱ

力扣1892&#xff0c;页面推荐Ⅱ&#xff0c;为一个社交媒体网站实施一个页面推荐系统。如果页面被user_id的 至少一个朋友喜欢 &#xff0c;而 不被user_id喜欢 &#xff0c;你的系统将 推荐 一个页面到user_id。 目录 题目描述 解题思路 完整代码 优化 题目描述 表&…
阅读更多...
hcip交换

hcip交换

交换机功能 无限的传输距离——识别&#xff0c;重写电信号&#xff08;帧&#xff09;保证信息完整彻底解决了冲突二层单播——MAC地址表提高端口密度 单播地址&#xff1a;MAC地址第一个字节第8位为0 组播地址&#xff1a;MAC地址第一个字节第8位为1 广播地址&#xff1a;全1…
阅读更多...
什么是BGP网络 （边界网关协议）

什么是BGP网络 （边界网关协议）

BGP&#xff08;边界网关协议&#xff09;是一种用于在互联网中交换路由信息的协议。作为网关或路由器之间的协议&#xff0c;BGP主要用于帮助确定数据包在网络中的路径。它通过在不同自治系统&#xff08;AS&#xff09;之间交换路径信息&#xff0c;实现了全球互联网网络的连…
阅读更多...
pyorbbecsdk奥比中光python版本SDK在Windows下环境配置笔记

pyorbbecsdk奥比中光python版本SDK在Windows下环境配置笔记

1、概述 Orbbec SDK Python Wrapper基于Orbbec SDK进行设计封装&#xff0c;主要实现数据流接收&#xff0c;设备指令控制。 2、系统要求 2.1、操作系统 Windows&#xff1a;Windows 10 (x64)&#xff08;本文 针对windows&#xff09;Linux: 18.04/20.04/22.04 (x64)Arm32:…
阅读更多...
P10166 [DTCPC 2024] 环

P10166 [DTCPC 2024] 环

解题思路 满足的序列即为环若图上有环&#xff0c;则代价为0若无环&#xff0c;则在图上已有的边在添加一条回边可形成环对所有的点由小到大排序由于环的大小可以为2初值设为&#xff0c;先不管最小点之间是否有边&#xff0c;反正不会更劣通过拓扑排序找环&#xff0c;在找环…
阅读更多...
Vue3+vite打包后页面空白问题

Vue3+vite打包后页面空白问题

vite.config.js vite.config.js 增加 base: ./ import { fileURLToPath, URL } from node:url import { defineConfig } from vite import vue from vitejs/plugin-vue// https://vitejs.dev/config/ export default defineConfig({base: ./,resolve: {alias: {: fileURLToPath…
阅读更多...
Mysql学习之各种锁

Mysql学习之各种锁

锁 事务的隔离性由锁来实现 MySQL并发事务访问相同记录 并发事务访问相同记录的情况大致可以分为3种&#xff1a; 读-读的情况 读-读情况&#xff0c;即并发事务相继读取相同的记录。读取操作本身不会对记录由有任何的影响&#xff0c;并不会引起什么问题&#xff0c;所以允许…
阅读更多...
git代码上库流程（一篇就够了）

git代码上库流程（一篇就够了）

文章目录 一、前言二、创建新分支三、修改代码四、合并分支 一、前言 多人协同开发一个项目&#xff0c;为了方便管理代码&#xff0c;每个人代码提交不冲突。git代码仓库管理是不可或缺的。对于新手来说&#xff0c;既不懂git原理又不懂底层逻辑&#xff0c;还经常错误提交代码…
阅读更多...
10s用递归实现反转链表（JAVA）

10s用递归实现反转链表（JAVA）

目录 1. 原理 1.1 问题 1.2 解决 1.3 终点 2.代码操作及讲解 2.1 演示代码 2.2 讲解 1. 原理 反转 A->B->C 1.1 问题 当反转A->B的链接时&#xff0c;当B改成指向A&#xff08;B->A&#xff09;, 就找不到C了&#xff1b; 1.2 解决 所以需要一个变量临时…
阅读更多...
uniapp_小程序选项卡（直接下载安装即可）

uniapp_小程序选项卡（直接下载安装即可）

选项卡 - DCloud 插件市场 也可加一行变成三栏
阅读更多...
Java集合相关面试题（2024大厂高频面试题系列）

Java集合相关面试题（2024大厂高频面试题系列）

1、说一说Java提供的常见集合&#xff1f;&#xff08;画一下集合结构图&#xff09; 在java中提供了量大类的集合框架&#xff0c;主要分为两类&#xff1a; 第一个是Collection 属于单列集合&#xff0c;第二个是Map 属于双列集合 在Collection中有两个子接口List和Set。…
阅读更多...
Kubernetes/k8s的核心概念

Kubernetes/k8s的核心概念

一、什么是 Kubernetes Kubernetes&#xff0c;从官方网站上可以看到&#xff0c;它是一个工业级的容器编排平台。Kubernetes 这个单词是希腊语&#xff0c;它的中文翻译是“舵手”或者“飞行员”。在一些常见的资料中也会看到“ks”这个词&#xff0c;也就是“k8s”&#xff…
阅读更多...
Page Object模式：为什么它是Web自动化测试的必备工具

Page Object模式：为什么它是Web自动化测试的必备工具

为 UI 页面写测试用例时&#xff08;比如 web 页面&#xff0c;移动端页面&#xff09;&#xff0c;测试用例会存在大量元素和操作细节。当 UI 变化时&#xff0c;测试用例也要跟着变化&#xff0c; PageObject 很好的解决了这个问题。 使用 UI 自动化测试工具时&#xff08;包…
阅读更多...
电子电气架构——汽车以太网诊断路由汇总

电子电气架构——汽车以太网诊断路由汇总

电子电气架构——汽车以太网诊断路由汇总 我是穿拖鞋的汉子，魔都中坚持长期主义的工程师。 老规矩，分享一段喜欢的文字，避免自己成为高知识低文化的工程师： 人们会在生活中不断攻击你。他们的主要武器是向你灌输对自己的怀疑：你的价值、你的能力、你的潜力。他们往往会将…
阅读更多...
lottie加载带图片的json 预览

lottie加载带图片的json 预览

背景 产品看到一款app的动效很不错&#xff0c;让我去模仿实现。 第一步 获取apk中的静态资源 拿到这个app的apk后&#xff0c;直接使用压缩工具解压&#xff0c; assets文件夹就是静态资源的目录 静态资源里面有lottie 那么大部分的动效应该都是lottie实现的 网上找了很多…
阅读更多...
蓝桥杯Java B组历年真题（2013年-2021年）

蓝桥杯Java B组历年真题（2013年-2021年）

一、2013年真题 1、世纪末的星期 使用日期类判断就行&#xff0c;这里使用LocalDate&#xff0c;也可以使用Calendar类 答案 2099 使用LocalDate import java.time.LocalDate; import java.time.format.DateTimeFormatter; // 1:无需package // 2: 类名必须Main, 不可修改p…
阅读更多...
配置MySQL与登录模块

配置MySQL与登录模块

使用技术 MySQL&#xff0c;Mybatis-plus&#xff0c;spring-security&#xff0c;jwt验证&#xff0c;vue 1. 配置Mysql 1.1 下载 MySQL :: Download MySQL Installer 1.2 安装 其他页面全选默认即可 1.3 配置环境变量 将C:\Program Files\MySQL\MySQL Server 8.0\bin…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023