AJAX 学习笔记(Day1)

「写在前面」

本文为黑马程序员 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.mzph.cn/news/716503.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

H264的打包,nal,es,pes,pts,dts,ps,ts

编码层次 视频编码层&#xff1a;预测、变换、量化、熵编码等操作slice层&#xff1a;将视频帧分割成若干个编码单元&#xff0c;包含一定数量的宏块&#xff0c;提高编解码的并行性和容错性。NAL层&#xff1a;提升对网络传输和数据存储的亲和性 视频编码层 基准-Baseline …

云计算与大数据课程笔记(一)云计算背景与介绍

如何实现一个简易搜索引擎&#xff1f; 实现一个简易的搜索引擎可以分为几个基本步骤&#xff1a;数据收集&#xff08;爬虫&#xff09;、数据处理&#xff08;索引&#xff09;、查询处理和结果呈现。下面是一个概括的实现流程&#xff1a; 1. 数据收集&#xff08;爬虫&am…

Nginx高级技巧:实现负载均衡和反向代理

文章目录 Nginx概述Nginx作用正向代理反向代理负载均衡动静分离 Nginx的安装 -->Docker3.1 安装Nginx3.2 Nginx的配置文件3.3 修改docker-compose文件 Nginx源码安装nginx常用命令nginx配置文件配置文件位置配置文件结构详情 Nginx的反向代理【重点】基于Nginx实现反向代理4…

C语言冒泡排序(高级版)

目录: 冒泡排序的原理 主函数 "冒泡排序函数" 比较函数 交换函数 最终输出 完整代码 冒泡排序的原理: 冒泡排序的原理是&#xff1a;从左到右&#xff0c;相邻元素进行比较。每次比较一轮&#xff0c;就会找到序列中最大的一个或最小的一个。这个数就会从序列的最右…

Windows上构建一个和Linux类似的Terminal

preview 目的是在Windows上构建一个和Linux类似的Terminal&#xff0c;让Windows炼丹和Linux一样舒适&#xff0c;同是让Terminal取代Xshell完成远程链接。 预览如下图 在Linux下我们使用zsh和oh-my-zsh结合&#xff0c;Windows下我们使用powershell7和oh-my-posh结合。 前提…

Vue 前端开发 v-for和v-if两个指令不能混合使用

原由&#xff1a; 在进行项目开发的时候因为在一个标签上同时使用了v-for和v-if两个指令导致的报错。 提示错误&#xff1a;The undefined variable inside v-for directive should be replaced with a computed property that returns filtered array instead. You should no…

nginx------------缓存功能 ip透传 负载均衡 (六)

一、http 协议反向代理 &#xff08;一&#xff09;反向代理示例:缓存功能 缓存功能可以加速访问&#xff0c;如果没有缓存关闭后端服务器后&#xff0c;图片将无法访问&#xff0c;缓存功能默认关闭&#xff0c;需要开启。 ​ proxy_cache zone_name | off; 默认off #指明调…

2023 版王道单科书勘误汇总(3.30)

注:因2023版对题目编号做了优化“历年真题全部放最后、且按年份排序”&#xff0c;以方便大家根据需要保留某些年份的真题作为最后的模拟。所以造成了一些题目和解析的编号错误。 数据结构: P11 P20 P56 P278 P326 “2.”中第 3 行”题 5改成”9”&#xff0c;第6行”题 8”改成…

css3详解

一.什么是CSS3 CSS3是Cascading Style Sheets的第三个版本&#xff0c;是一种用于描述文档样式的语言&#xff08;CSS3是CSS&#xff08;层叠样式表&#xff09;技术的升级版本&#xff09;。它是前端开发中用于控制网页布局和样式的技术之一。CSS3引入了许多新的特性和功能&a…

hexo图片显示不出且图片路径错误/.com//

参考博客&#xff1a; hexo 图片显示问题及使用typora设置图片路径-CSDN博客 javascript - hexo 图片路径错误/.com// - SegmentFault 思否 先说如何让hexo图片成功地显示出来 Step1: 修改config设置 将 _config.yml 设置文件中的 post_asset_folder 修改为 true 这一步的作…

windows下安装cnpm

cnpm是淘宝团队开发的一个针对中国用户的npm镜像源&#xff0c;它是npm的一个定制版本。由于国外的npm源在国内访问速度较慢&#xff0c;所以cnpm镜像源可以提供更快的下载速度。cnpm的使用方式与npm基本相同&#xff0c;只需将npm替换为cnpm即可。 要想使用cnpm等先安装node.…

反序列化逃逸 [安洵杯 2019]easy_serialize_php1

打开题目 题目源码&#xff1a; <?php$function $_GET[f];function filter($img){$filter_arr array(php,flag,php5,php4,fl1g);$filter /.implode(|,$filter_arr)./i;return preg_replace($filter,,$img); }if($_SESSION){unset($_SESSION); }$_SESSION["user&qu…

sizeof 和 strlen的区别

sizeof sizeof是单目操作符,sizeof计算变量所栈内存空间大小,单位是字节,如果操作数是类型的话,会计算类型所占大小,sizeof指在乎占用内存空间大小不在乎内容是什么. int main() {int a 0;printf("%zd\n", sizeof(a));printf("%zd\n", sizeof a );printf…

巧【二叉搜索树的最近公共祖先】【二叉搜索树的性质】Leetcode 235. 二叉搜索树的最近公共祖先

【二叉搜索树的最近公共祖先】【二叉搜索树性质】Leetcode 235. 二叉搜索树的最近公共祖先 【巧】解法1 利用二叉搜索树有序的性质解法2 采用二叉树求最近公共祖先的方法——后序遍历 ---------------&#x1f388;&#x1f388;235. 二叉搜索树的最近公共祖先 题目链接&#x…

Springboot+vue的制造装备物联及生产管理ERP系统(有报告)。Javaee项目,springboot vue前后端分离项目。

演示视频&#xff1a; Springbootvue的制造装备物联及生产管理ERP系统&#xff08;有报告&#xff09;。Javaee项目&#xff0c;springboot vue前后端分离项 项目介绍&#xff1a; 本文设计了一个基于Springbootvue的制造装备物联及生产管理ERP系统&#xff0c;采用M&#xff…

AI学习集合-前瞻

AI学习前瞻 工作岗位 算法工程师机器学习工程师图像算法工程师ai工程师NLP高级算法工程师 学习路线 应用场景 计算机视觉技术应用场景 自然语言应用 AI流程 AI拟人流程 机器人历史数据经验模型规律依据模型预测未来依据规律做出判断 AI基本流程 术语所用到的技术手段数据数…

javascript中对包含关系判断介绍

本文将为您详细讲解 JavaScript 中对包含关系的判断&#xff0c;包括数组、字符串等&#xff0c;并提供相应的代码例子。 1. 数组包含关系判断 在 JavaScript 中&#xff0c;数组包含关系判断通常使用 Array.prototype.includes() 方法。这个方法返回一个布尔值&#xff0c;表示…

mac 本地使用dockerfile启动 springboot项目

1.创建Dockerfile放在项目的根目录下 2.编写Dockerfile FROM openjdk:11 MAINTAINER ChengLinADD target/JiaLi-0.0.1-SNAPSHOT.jar /app.jar# 暴露 Spring Boot 应用的端口号 EXPOSE 8088 # 启动 Spring Boot 应用 CMD ["java", "-jar", "app.jar&q…

前端学习第四天-css提升

达标要求 掌握css复合选择器 块级元素和行内元素及行内块的区别? 哪些元素是块元素,行内元素及行内块元素? 熟练掌握display的用法 能够说出css三大特性 熟练运用背景样式 1. CSS复合选择器 复合选择器是由两个或多个基础选择器&#xff0c;通过不同的方式组合而成的…

vue2结合electron开发跨平台应用(桌面端应用)

1.确定nodejs和electron的版本号 确定nodejs和electron的版本号及其重要&#xff0c;因为electron的开发版本需要指定的nodejs版本支持。 本文安装测试使用的是: 1.node18.19.0 2.npm10.2.3 3.vue-cli5.0.8 4.electron29.0.0 2.创建vue2项目 vue create elctron29.0.0_no…