Ajax-3

news2024/9/21 20:48:18

一.图片上传

        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.coloradmin.cn/o/2057889.html

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

相关文章

P38-数据存储1

百度2015年系统工程师笔试题 编程题 编程题 编程题 编程题

20240820飞凌的OK3588-C的核心板在Linux R4下使用poweroff关机

20240820飞凌的OK3588-C的核心板在Linux R4下使用poweroff关机 2024/8/20 14:03 经过测试,poweroff有效,关机之后,12V/0.024A12*0.0240.288W shutdown无效。 reboot -p无效。 rootok3588:/# rootok3588:/# shutdown -h now sh: shutdown: c…

Maven-06.依赖管理-依赖传递

一.依赖传递 什么是依赖传递:projectA依赖于JAR包和projectB,而JAR包又依赖于黄色的JAR包。而projectB依赖于projectC和其他JAR包。因此projectA依赖于projectB,projectC和图中的所有JAR包。这就是依赖的传递性。其中蓝绿色部分成为直接依赖。在当前项目…

ant design pro 的环境变量的使用

如上图所示,定义好环境变量后,整个应用的名字就发生的变化。 规则 环境变量的名称要以 UMI_APP 开头 如何使用这个环境变量 直接用 process.env.UMI_APP_APP_NAME 来调它。 ant design pro 如何去保存颜色ant design pro v6 如何做好角色管理ant desi…

【2025校招】4399 NLP算法工程师笔试题

目录 1. 第一题2. 第二题3. 第三题 ⏰ 时间:2024/08/19 🔄 输入输出:ACM格式 ⏳ 时长:2h 本试卷分为单选,自我评价题,编程题 单选和自我评价这里不再介绍,4399的编程题一如既往地抽象&#xff…

JavaScript(25)——BOM、延迟函数、JS执行机制

BOM BOM是浏览器对象模型 window对象是一个全局对象,也就是JavaScript中的顶级对象所有通过var定义的全局作用域中的变量,函数都会变成window对象的属性和方法window对象下的属性和方法调用的时候可以省略window 延时函数 let a setTimeout(回调函数…

Python(Falsk) + React Golang(Gin) + Vue 全栈开发的最佳实践

前面分别讲了 Python(Falsk) 、 React 、 Golang(Gin) 、 Vue(Element),现在整体的给大家汇报一下,这个是简单搭建的demo,后面的添砖加瓦需要自己动手咯,有不明白的可以参考一下小编前面的文章,也许会给大家有答疑解惑…

QTday04

1.思维导图 2. . #include "widget.h" #include "ui_widget.h" #include "widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget), speecher(new QTextToSpeech(this)) //给语音播报者实例化空间{ui->setupUi(th…

ansible搭建+ansible常用模块

ansible搭建 管理机安装ansible,被管理节点必须打开ssh服务 1.管理机安装ansible yum -y install ansible 2.查看版本 ansible --version ansible 2.9.27 3.查找配置文件 find /etc/ -name "*ansible*" /etc/ansible /etc/ansible/ansible.cfg 4.三台被管理机…

轻松捕捉屏幕精彩,2024年录屏神器大盘点

随着技术的不断进步和用户需求的日益多样化,市场上的录屏软件更是层出不穷,各有千秋。今天,就让我们一同盘点那些和win10录屏快捷键一样可以快捷控制的专业录屏软件,探索它们如何助力我们更加高效地捕捉屏幕上的每一个精彩瞬间。 …

数据结构-链表-第二天

结合leetcode学习c 链表比数组更易增加和删除数据,但访问速度更慢 定义 链表(linked list)是一种线性数据结构,其中的每个元素都是一个节点对象,各个节点通过“引用”相连接。 引用记录了下一个节点的内存地址&#…

「字符串」前缀函数|KMP匹配:规范化next数组 / LeetCode 28(C++)

概述 为什么大家总觉得KMP难?难的根本就不是这个算法本身。 在互联网上你可以见到八十种KMP算法的next数组定义和模式串回滚策略,把一切都懂得特别混乱。很多时候初学者的难点根本不在于这个算法本身,而是它令人痛苦的百花齐放的定义。 有…

[C++] map、set的 红黑树 封装(一)

标题:[C] map、set的 红黑树 封装 水墨不写bug (图片来源于网络) 目录 一、红黑树与AVL树的比较(为什么容器选择红黑树) 二、map、set的封装 1.模板参数 2.红黑树迭代器设计 正文开始: 一、红黑树与AV…

RK3588J正式发布Ubuntu桌面系统,丝滑又便捷!

本文主要介绍瑞芯微RK3588J的Ubuntu系统桌面演示,开发环境如下: U-Boot:U-Boot-2017.09 Kernel:Linux-5.10.160 Ubuntu:Ubuntu20.04.6 LinuxSDK: rk3588-linux5.10-sdk-[版本号] (基于rk3…

【GH】【EXCEL】P7: Control

XL Label XL Dropdown XL CHECK BOX XL Button XL Scroller XL Spinner XL ListBox

RocketMQ源码分析 - 环境搭建

RocketMQ源码分析 - 环境搭建 环境搭建源码拉取导入IDEA调试1) 启动NameServer2) 启动Broker3) 发送消息4) 消费消息 环境搭建 依赖工具 JDK:1.8MavenIntellij IDEA 源码拉取 从官方仓库 https://github.com/apache/rocketmq clone或者download源码。 源码目录…

【微服务】微服务组件之Nacos注册中心和配置中心的使用

背景: 在当前的软件架构领域,微服务架构凭借其高度的可扩展性、灵活性和可维护性,已成为企业构建复杂应用的首选。微服务架构通过将应用拆分成一系列小的、独立的服务,实现了服务的解耦和复用,从而提高了应用的可扩展性…

Sass实现网页背景主题切换

Sass 实现网页背景主题切换 前言准备工作一、 简单的两种主题黑白切换1.定义主题2. 添加主题切换功能3. 修改 data-theme 属性 二、多种主题切换1. 定义主题2. 动态生成 CSS 变量1.遍历列表2.遍历映射3.高级用法 3. 设置默认主题4. 切换功能HTML 三、多种主题多种样式切换1. 定…

在 Fedora 上安装 LAMP(Linux、Apache、MySQL、PHP)的方法

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站。 关于 LAMP LAMP 栈是一组用于启动和运行 Web 服务器的开源软件。该缩写代表 Linux、Apache、MySQL 和 PHP。由于服务器已经在运行 Fedo…

高性能web服务器1

基础 Web 服务简介 Web 服务是互联网的核心组成部分之一,它允许用户通过浏览器访问信息和应用程序。一个基础的 Web 服务通常由 Web 服务器软件、静态网页内容、以及可选的动态内容生成程序组成。 Web 服务器软件 Web 服务器软件是运行在服务器上的程序&#xff…