前端框架前置课(1)---AJAX阶段

news2024/9/28 9:26:44

1. AJAX入门

1.1 AJAX概念和axios使用

1.1.1 什么是AJAX?

在这里插入图片描述

1.1.2 怎么用AJAX?

在这里插入图片描述
在这里插入图片描述
引入axios.js

在这里插入图片描述
获取省份列表数据
在这里插入图片描述

1.2 认识URL

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

1.3 URL查询参数

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

1.4 常用请求方和数据提交

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

1.5 HTTP协议-报文

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

1.5.1 HTTP响应状态码

在这里插入图片描述

1.5.1.1 状态码:1XX(信息)

在这里插入图片描述

1.5.1.2 状态码:2XX(成功)

在这里插入图片描述

1.5.1.3 状态码:3XX(重定向消息)

在这里插入图片描述

1.5.1.4 状态码:4XX(客户端错误)

在这里插入图片描述

1.5.1.5 状态码:5XX(服务端错误)

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

1.6 案例-用户登录

在这里插入图片描述
在这里插入图片描述

1.7 form-serialize插件

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2. AJAX综合案例

2.1 案例-图书管理

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2.2 图片上传

在这里插入图片描述

2.3 案例-网站换肤

在这里插入图片描述

2.4 案例-个人信息设置

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3.AJAX原理

3.1 XMLHttpRequest

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3.2 Promise

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3.3 封装简易版axios

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3.4 案例-天气预报

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

4.AJAX进阶

4.1 同步代码和异步代码

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

4.2 回调函数地狱和Promise链式调用

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

4.3 async和await使用

在这里插入图片描述
在这里插入图片描述

4.4 事件循环-EventLoop

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

4.5 Promise.all静态方法

在这里插入图片描述
在这里插入图片描述

4.6 案例-商品分类

在这里插入图片描述

4.7 案例-学习反馈

在这里插入图片描述
在这里插入图片描述

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

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

相关文章

论文阅读:UniFormer和UniFormerV2

文章目录 UNIFormer动机方法动态位置嵌入(DPE)多头关系聚合器(MHRA) 模型代码总结 UniFormerV2动机方法整体框架实现细节 总结 UNIFormer 本文主要介绍了UniFormer: Unified Transformer for Efficient Spatial-Temporal Representation Learning 代码:https://git…

购买腾讯云服务器需要多少钱?价格表查询

腾讯云服务器多少钱一年?61元一年起。2024年最新腾讯云服务器优惠价格表,腾讯云轻量2核2G3M服务器61元一年、2核2G4M服务器99元一年可买三年、2核4G5M服务器165元一年、3年756元、轻量4核8M12M服务器646元15个月、4核16G10M配置32元1个月、312元一年、8核…

Python综合实战案例-数据清洗分析

写在前面: 本次是根据前文讲解的爬虫、数据清洗、分析进行的一个纵隔讲解案例,也是对自己这段时间python爬虫、数据分析方向的一个总结。 本例设计一个豆瓣读书数据⽂件,book.xlsx⽂件保存的是爬取豆瓣⽹站得到的图书数据,共 6067…

html网页制作-3D旋转卡片

网页制作-3D旋转卡片 两种旋转卡片的制作 旋转卡片&#xff08;1&#xff09; 代码 html代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-wid…

Transformer的前世今生 day03(Word2Vec、如何使用在下游任务中)

前情回顾 由上一节&#xff0c;我们可以得到&#xff1a; 任何一个独热编码的词都可以通过Q矩阵得到一个词向量&#xff0c;而词向量有两个优点&#xff1a; 可以改变输入的维度&#xff08;原来是很大的独热编码&#xff0c;但是我们经过一个Q矩阵后&#xff0c;维度就可以控…

linux命令(八)

搜索 其实很多人使用linux的是因为服务器是linux系统&#xff0c;既然是服务器&#xff0c;那查找日志肯定是大家用的很多的了&#xff0c;这一节就来介绍一下搜索的命令 grep 先看一下我的文件中的内容是什么 查找不包含该字符串的行 -v v代表的invert-match(不匹配的行) …

基于Java中的SSM框架实现电能计量与客户服务管理系统项目【项目源码+论文说明】计算机毕业设计

基于Java中的SSM框架实现电能计量与客户服务管理系统演示 摘要 当前时代的两个突出特征是世界经济一体化和以计算机为代表的信息技术的迅速发展。为了使组织在激烈的竞争中保持实力和发展&#xff0c;它必须对迅速变化的环境做出有效而有效的响应。 管理信息系统的应用可以提供…

202446读书笔记|《夜风颂》——生命的内核是过往和希望 有情在朝暮 长聚长相思

202446读书笔记|《夜风颂》——生命的内核是过往和希望 有情在朝暮 长聚长相思 序现代诗古体诗 《夜风颂》作者王锴&#xff0c;前段时间加入书架的书&#xff0c;前边有几首现代诗挺惊艳&#xff0c;蛮喜欢的&#xff0c;后边古体诗稍逊色些。值得一读的一本小诗集。 序 海鸥之…

11.创建后台系统项目

后台系统项目 兼容性 vite官网&#xff1a;https://vitejs.dev/ vite中文网&#xff1a;https://cn.vitejs.dev/ vite需要node.js版本 >14.0.0&#xff0c;建议16 node -v 查看版本号 创建项目 进入存放目录 执行命令 npm create vitelatest 选择vue框架 选择typescript…

缓存穿透、缓存击穿、缓存雪崩及其解决方法

缓存穿透、缓存击穿、缓存雪崩是redis的三大问题。 在介绍这三大问题之前&#xff0c;我们需要先了解Redis作为一个缓存中间件&#xff0c;在项目中是如何工作的。首先看一下在没有缓存中间件的时候的系统数据访问的架构图&#xff1a; 客户端发起一个查询请求的时候&#xff…

一个软开关,长按开机,自动关机的实现。

连接说明&#xff1a; 1.ADP_PWR接适配器输入插座 当适配器插入的时候 ADP_PWR接入适配器7.4~8.4V电压 2.ON/OFF_KEY 接开关按键&#xff0c;当开关按下的时候&#xff0c;ON/OFF_KEY 接入电池电压 7.4V 3.ON/OFF_CTRL接单片机IO口 开机实现说明&#xff1a; 1.长按开…

存储随笔原创科普视频首播~

一周之前&#xff0c;存储随笔创建了B站账号。小编利用上个周末休息时间专门研究了B站视频录制的各种方案。发现并没有想象的很容易&#xff0c;先花了很长时间准备了一个PPT&#xff0c;再准备演讲大纲&#xff0c;最终磕磕绊绊完成了首期原创视频录制&#xff01; 可能不尽如…

Mybatis中显示插入数据成功,但在数据库中却没有显示插入的数据

1、在mybatis-config.xml中查看是否添加了JDBC&#xff0c;并引入了映射文件 2、在测试文件中&#xff0c;结尾是否添加提交事务&#xff1a;sqlSession.commit() 添加了这一步就能够将数据提交到数据库中&#xff0c;最后再关闭事务&#xff1a;sqlSession.close() * 如果运…

基于SpringBoot校园外卖服务系统设计与实现

点赞收藏关注 → 私信领取本源代码、数据库 一、项目概述 项目名称&#xff1a;基于SpringBoot校园外卖服务系统设计与实现 项目架构&#xff1a;B/S架构 开发语言&#xff1a;Java语言 主要技术&#xff1a;SpringBootMybatisMySQL 运行环境&#xff1a;Windows7以上、J…

Windows Server 2016 配置NTP客户端

目录 1. 前提条件1.1 进入服务管理界面1.2 开启Windows Time服务 2. 情况1&#xff1a;可以直接设置NTP时钟2.1 Internet时间设置 3. 情况2&#xff1a;有的版本服务器上没有“Internet时间”3.1 运行gpedit.msc 打开本地策略组3.2 Windows 时间服务3.3 配置Windows NTP客户端3…

Replidec:使用朴素贝叶斯分类器从宏基因组数据中识别病毒生命周期

Replidec - Use naive Bayes classifier to identify virus lifecycle from metagenomics data | bioRxivReplidec - Use naive Bayes classifier to identify virus lifecycle from metagenomics data | bioRxiv 安装 docker pull denglab/replidec 使用 for i in *_vOT…

draw.io 去除箭头

问题 draw.io 去除箭头 详细问题 笔者使用draw.io绘制流程图&#xff0c;需要没有箭头的连接器&#xff0c;但是General所提供的连接器添加了尾部箭头&#xff0c;如何取消尾部箭头? 解决方案 1、点击选中选择连接器&#xff08;箭头1&#xff09;。在格式面板的“Style…

【C++】关联式容器——map和set

1 关联式容器 STL中我们常用的部分容器&#xff0c;比如&#xff1a;vector、list、deque、forward_list(C11)等&#xff0c;这些容器统称为序列式容器&#xff0c;因为其底层为线性序列的数据结构&#xff0c;里面存储的是元素本身。 那什么是关联式容器呢&#xff1f;它与序…

keepalived高可用方案

keepalived概念 keepalived是一个开源的虚拟路由冗余协议&#xff08;VRRP&#xff09;实现&#xff0c;它能够提供高可用性&#xff08;HA&#xff09;的解决方案。VRRP是一种网络协议&#xff0c;用于在多个路由器之间分配路由任务&#xff0c;以保证网络的可靠性。在服务器…

Ubuntu的快照和系统恢复

一、快照 ubuntu的快照&#xff0c;相当于将你系统目前的状态做一个备份&#xff0c;完全复制的当前状态。便于之后进行恢复 名称任意 这个文件就是快照文件 二、系统恢复 若你的系统出现问题&#xff0c;这时可以使用快照进行快速修复&#xff1a;