Ajax-3

一.图片上传

        1.获取图片文件对象

        2.使用FormData携带图片文件

const fd = new FormData()
fd.append(参数名, 值)

         3.提交表单数据到服务器,使用图片url网址

二.AJAX原理—XMLHttpRequest

        定义:XMLHttpReques(XHR)对象用于与服务器交互。通过XMLHttpRequest可以不断刷新页面的情况下请求特定URL,获取数据。这允许网页在不影响用户操作的情况下,更新页面的局部内容。XMLHttpRequest在AJAX编程中被大量使用

        关系:axios内部采用XMLHttpRequest与服务器交互

        好处:掌握使用XHR与服务器进行数据交互,了解axios内部原理

        使用XMLHttpRequest

        步骤:
                1.创建XMLHttpRequest

                2.配置请求方法和请求url地址

                3.监听loadend时间,接收响应结果

const xhr = new XMLHttpRequest()
xhr.open('请求方法', '请求url网址')
xhr.addEventListener('loadend', () => {console.log(xhr.respone)
})
xhr.send()

三.Promise-三种状态

作用:了解Promise对象如何关联的处理函数,以及代码执行顺序

概念:一个Promise对象,必然处于以下几种状态之一

        待定(pending):初始状态,既没有被兑现,也没有被拒绝

        已兑现(fulfilled):意味着,操作成功完成

        已拒绝(rejected):意味着,操作失败

        

注意:Promise对象一旦被兑现/拒绝就是已敲定了,状态无法再被改变

四.封装_简易axios_获取省份列表

需要:基于Promise+XHR封装myAxios函数,获取省份列表展示

步骤:

1.定义myAxios函数,接收配置对象,返回Promise对象

2.发起XHR请求,默认请求方法为GET

3.调用成功/失败的处理程序

4.使用myAxios函数,获取省份列表展示

            

五.封装_简易axios_获取地区列表

需求:修改myAxios函数支持传递查询参数,获取“辽宁省”,“大连市”对应列表展示

步骤:

1.myAxios函数调用后,传入params选项

2.基于URLSearchParams转换查询参数字符串

3.使用自己封装的myAxios函数展示地区列表

六.封装_简易axios_注册用户

需求修改myAxios函数支持传递请求体数据,完成注册用户功能

步骤:

1.myAxios函数调用后,判断data选项

2.转换数据类型,在send方法中发送

3.使用自己封装的myAxios函数完成注册用户功能

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

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

相关文章

SM2前后端加密和解密

一&#xff1a;前端vue 二&#xff1a;后端解密 三&#xff1a;后端详解 3.1maven文件 <dependency><groupId>org.bouncycastle</groupId><artifactId>bcprov-jdk15to18</artifactId><version>1.66</version> </dependency&g…

Linux命令学习 -- tar指令

功能&#xff1a;对文件和目录进行打包 格式&#xff1a;tar [参数] [压缩文件名] [要压缩的目录或者文件的名字]常用参数如下&#xff1a; -c &#xff1a;创建一个新的打包文件&#xff1b; -x :对打包文件进行解压缩&#xff1b; -z :gzip 格式进行压缩或者解压&#xff0c;…

Cookie Session Token

什么是会话技术&#xff1f; Cookie 以登录为例&#xff0c;用户在浏览器中将账号密码输入并勾选自动登录&#xff0c;浏览器发送请求&#xff0c;请求头中设置Cookie&#xff1a;userName:张三 ,password:1234aa &#xff0c;若登录成功&#xff0c;服务器将这个cookie保存…

重磅发布!天途多自由度无人机调试台

无人机调试、测试和试飞很容易受空域、场地、环境、失控炸机和操作失误等限制。天途TE55多自由度无人机整机调试台应运而生&#xff01; 突破空域限制 天途TE55多自由度无人机整机调试台&#xff0c;突破场地空域限制&#xff0c;不到0.7平米的空间&#xff0c;即可完成小型无人…

如何使用DataGear零编码快速制作MQTT物联网实时数据看板

DataGear是一个开源免费的数据可视化分析平台&#xff0c;企业版在开源版基础上开发&#xff0c;新增了诸多企业级特性&#xff0c;包括&#xff1a;MySQL及更多部署数据库支持、MQTT/WebSocket/Redis/MongoDB数据集、OAuth2.0/CAS/JWT/LDAP统一登录支持、前后端敏感信息加密传…

每天五分钟深度学习框架pytorch:神经网络工具箱nn的介绍

本文重点 我们前面一章学习了自动求导,这很有用,但是在实际使用中我们基本不会使用,因为这个技术过于底层,我们接下来将学习pytorch中的nn模块,它是构建于autograd之上的神经网络模块,也就是说我们使用pytorch封装好的神经网络层,它自动会具有求导的功能,也就是说这部…

高性能 Web 服务器:让网页瞬间绽放的魔法引擎(下)

目录 一.Nginx 反向代理功能 1.缓存功能 2.http 反向代理负载均衡 二.实现 Nginx 四层负载均衡 三.实现 FastCGI 1.为什么会有FastCGI&#xff1f; 2.什么是PHP-FPM&#xff1f; 3.FastCGI配置指令 4.Nginx与php-fpm在同一服务器 5.Nginx配置转发 6. php的动态扩展模…

探索全光网技术 | 全光网相关厂商的产品解决方案整理 (锐捷系列)

全光网产品解决方案整理-锐捷系列 目录 一、教学场景1、方案概述2、方案需求3、实践案例4、相关产品5、方案价值 二、办公场景1、方案概述2、方案需求3、实践案例4、相关产品5、方案价值 三、宿舍场景1、方案概述2、方案需求3、实践案例4、相关产品5、方案价值 注&#xff1a;本…

你的显卡能不能玩《黑神话:悟空》?

《黑神话&#xff1a;悟空》作为一款备受瞩目的国产单机大作&#xff0c;其对显卡和整体硬件配置的需求较高。根据官方公布的信息&#xff0c;游戏的推荐配置包括GeForce RTX 40系列GPU&#xff0c;以确保在2K或4K分辨率下能够享受到60FPS的全景光追游戏体验。特别是GeForce RT…

2024年新SCI顶刊算法信息获取优化算法IAO优化Transformer-GRU模型的多变量时间序列预测

matlab R2024a以上 一、数据集 ​ ​ 二、2024年新SCI顶刊算法信息获取优化算法IAO 本期介绍了一种名为信息获取优化算法Information acquisition optimizer&#xff0c;IAO的元启发式算法。该算法受人类信息获取行为的启发&#xff0c;由信息收集、信息过滤和评估以及信息分…

C#中客户端直接引用服务端Proto文件

gRPC 客户端是从 .proto 文件生成的具体客户端类型。 具体 gRPC 客户端具有转换为 .proto 文件中 gRPC 服务的方法。 下一步打开【服务引用】 控制面板 选择grpc选项&#xff0c;然后继续 到此配置完成&#xff0c;然后就和服务共用一份protocol文件

图像生成模型基础——Stable Diffusion模型介绍

随着人工智能技术的飞速发展&#xff0c;图像生成技术也取得了显著进步。扩散模型&#xff08;Stable Diffusion&#xff09;因其高效性和稳定性而得到广泛关注&#xff0c;目前的大多数生成模型都是以扩散模型为基础进行改进得到。首先简单介绍一下传统人工智能模型和生成模型…

request.getRequestURI()与request.getRequestURL()的区别

1.返回值的区别&#xff1a; request.getRequestURL() 返回值是一个StringBuffer类型 request.getRequestURI() 返回值是一个String类型 先看 request.getRequestURL() 返回的是一个具体的地址&#xff0c;访问网页的地址 而 request.getRequestURI() 返回的是一个映射地址&a…

VM Ubuntu22.04 ROS2 从头安装

目录 前言安装步骤1 设置编码2 添加ROS2软件源&#xff08;从哪去下载ros2相关软件&#xff09;报错解决方法 3 安装报错解决方法1解决方法2 报错 4 设置环境变量5 Ros2 测试Hello World 发送和监听小海龟键盘控制 成功 Hello World 发送和监听界面成功控制小海龟界面 前言 本…

【java】RuoYiBootstrap多模块版本-新写的接口,用接口工具访问,状态码302,访问不到。打的断点也进不去。其实是Shiro拦截器搞的鬼

【java】RuoYiBootstrap多模块版本-新写的接口&#xff0c;用接口工具访问&#xff0c;状态码302&#xff0c;访问不到。打的断点也进不去 你如果着急&#xff0c;可以直接看《ShiroConfig.java文件源码-过滤器配置-重点代码》 重点 状态码&#xff1a;302访问不到断点进不去 …

FileNotFoundException: XXX (系统找不到指定的文件。)

目录 问题描述 问题分析 问题总结 问题描述 idea引入文件&#xff0c;系统去读取&#xff0c;但是路径的问题报错系统找不到指定文件 String filePath "test.txt"; try {FileInputStream fileInputStream new FileInputStream(filePath); } catch (FileNotFou…

信息搜集--敏感文件Banner

免责声明:本文仅做分享参考... 目录 git安装: git目录结构: 敏感目录泄露 1-git泄露 (1)常规git泄露 scrabble工具 (2)git回滚 (3)git分支 GitHacker工具 (4)git泄露的其他利用 .git重定向问题 2-SVN泄露 dvcs-ripper工具 3-小结 dirsearch目录扫描工具 敏感备…

MySQL修改表属性

一、修改表名 ① 使用DDL语句修改表名 ALTER TABLE 旧表名 RENAME 新表名; ② 使用Navicat修改表名 二、修改列 2.1 修改列名 ① 使用DDL语句修改列名 ALTER TABLE 表名 CHANGE COLUMN 旧列名 新列名 类型; ② 使用Navicat修改列名 2.2 修改列类型 ① 使用DDL语句修改列类…

C++实现多线程三窗口卖票程序

假设我们有100张门票&#xff0c;有三个售卖窗口&#xff0c;我们希望以多线程的方式将这些票卖出去&#xff0c;这样效率会更高一些。 首先我们需要有一个全局的门票变量。 int tickts 100; 卖票的函数&#xff0c;由于每个窗口卖出一张票都需要花费一些时间&#xff0c;假设…

springboot的启动流程原理

一:入口简介: 首先,分析启动流程,就要 找到入口. 启动流程的入口方法就是这个run方法: 点进去之后就是这样: 主要分为了两个步骤: 1.创建springBootApplication对象 2.运行SpringApplication#run(java.lang.String...)方法; 上面说了主要分为两个步骤,那么接下…