4 前端前置技术（上）：AJAX技术、Axios技术（前端发送请求）

文章目录

  • 前言
  • 一、Ajax技术（从服务端获取数据，发送各种请求）
    • 0 接口文档管理：使用apipost等接口测试软件创建接口便于前端后端分离测试
    • 1 基本概念
    • 2 原生Ajax使用示例（几年前的早期用法）
  • 二、 Axios技术(对原生的Ajax进行了封装)
    • 1 基本概念
      • （1）Axios是什么
      • （2）常见的请求方式有哪些？
    • 2 快速入门
      • 示例1：入门案例
      • 示例2：入门案例+绑定事件
    • 3 Axios通用请求格式语法
      • 示例1：params传递参数发送get请求
      • 示例2：data传递参数发送post请求
      • 综合案例：地区查询
    • 4 axios 错误处理

前言

本课程所有接口采用apifox模拟，全部使用的是
B站-AJAX和黑马头条-数据管理平台
这个里面的接口进行测试

一、Ajax技术（从服务端获取数据，发送各种请求）

参考视频
官方文档

0 接口文档管理：使用apipost等接口测试软件创建接口便于前端后端分离测试

参考视频

  • 接口文档管理：
    • 在线
      • apipost
      • apifox
      • postman等等
    • 离线
      • word
      • md

在线的apipost这些测试工具功能很多，具体的后面不断深入学习慢慢了解这个测试工具，这个测试工具必须会用，后面无论是前端还是后端都需要频繁使用这个工具来进行测试。

下面的Ajax技术案例中的后端返回json数据都是通过这些接口工具的mock功能模拟生成的。

1 基本概念

学习本节前建议先去学习什么是GET、POST请求这些

  • 概念: Asynchronous JavaScript And XML，异步的JavaScript和XML。
    Ajax技术是一个异步交互技术，通过这个Ajax技术我们就可以从服务端获取数据
  • 作用:
    • 数据交换: 通过Ajax可以给服务器发送请求，并获取服务器响应的数据。
    • 异步交互: 可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如: 搜索联想、用户名是否可
      用的校验等等。
      在这里插入图片描述
  • 同步与异步请求区别
    • 举一个例子就好理解了
      我们在点击某些页面的时候，如果网络不好界面就会一直卡在转圈圈的界面，我们不能进行任何操作，这就是同步请求；如果我们点击某些页面就算网络不好我们还是可以操作页面，例如我们下载文件这个请求就是典型的异步请求。
  • Ajax技术就是一项发送异步请求的技术了。
    在这里插入图片描述

2 原生Ajax使用示例（几年前的早期用法）

  • 太繁琐，现在已经淘汰，了解一下
    可以使用网页版的apifox、或者apipost（个人感觉apifox更好用，界面更加清晰，apipost界面有点复杂，好多功能要摸索）生成一个get请求响应数据作为测试

  • 使用

    • （1）准备数据地址: http://hmajax.itheima.net/api/province
      示例接口文档：获取-省份列表
    • （2）创建XMLHttpRequest对象: 用于和服务器交换数据
    • （3）向服务器发送请求
    • （4）获取服务器响应数据

示例：

<body>
    <input type="button" value="获取数据" onclick = "getData()">
    <div id="div1"></div>
</body>

<script>
    function getData(){
        // 1 创建 XMLHttpRequest 对象
        var xmlHttpRequest = new XMLHttpRequest();

        // 2 发送异步请求
        xmlHttpRequest.open("GET","http://hmajax.itheima.net/api/province");
        xmlHttpRequest.send(); // 发送请求

        // 3 获取服务器响应的数据
        xmlHttpRequest.onreadystatechange = function(){
        if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){      // 判断服务器是否响应成功
            //var data = JSON.parse(xmlHttpRequest.responseText);
            document.getElementById("div1").innerHTML = xmlHttpRequest.responseText;
            // xmlHttpRequest.responseText ：返回服务器响应的数据，以字符串形式返回
        }
        }

    }
    
</script>

查看结果：
在这里插入图片描述

  • 代码解释
    • 官方文档
      在这里插入图片描述

二、 Axios技术(对原生的Ajax进行了封装)

1 基本概念

（1）Axios是什么

参考视频

  • 介绍:Axios 对原生的Ajax进行了封装，简化书写，快速开发。
  • 官网(使用文档等): https://www.axios-http.cn/
    Axios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.js

（2）常见的请求方式有哪些？

请求方法: 对服务器资源，要执行的操作
在这里插入图片描述

请求方法操作
GET获取数据
POST提交数据
PUT修改数据(全部)
DELETE删除数据
PATCH修改数据(部分)

比较常用的就是get和post请求，其余的说实话post请求好像也都能干

2 快速入门

  • step1: 引入Axios的js文件
    <script src=“https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js”></script>

  • 使用 axios 函数发送请求，并获取响应结果
    （1）传入配置对象
    （2）再用 .then 回调函数接收结果，并做后续处理
    下面的语法，默认是get请求
    在这里插入图片描述

示例1：入门案例

参考视频

  • 需求: 请求目标资源地址，拿到省份列表数据，显示到页面
    在这里插入图片描述

  • 目标资源地址: http://hmajax.itheima.net/api/province
    接口文档说明

<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>
    
  </body>

  <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>

结果：
在这里插入图片描述

示例2：入门案例+绑定事件

<body>
    <!--
      axios库地址：https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js
      省份数据地址：http://hmajax.itheima.net/api/province
  
      目标: 使用axios库, 获取省份列表数据, 展示到页面上
      1. 引入axios库
    -->
    <body>
      <input type="button" value="获取数据" onclick = "getData()">
      <div id="div1"></div>
    </body>
    
  </body>

  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    function getData(){
        // 通过axios发送异步请求,默认是GET请求
        axios({
            url: "http://hmajax.itheima.net/api/province"
        }).then(result =>{
            document.getElementById("div1").innerHTML = result.data.list.join('<br>');
            // 通过 result.data 获取服务器返回的的JSON对象
        })
    }
  </script>

结果：
在这里插入图片描述

3 Axios通用请求格式语法

  • 通用请求格式语法
axios({
  method: 'post',        // 可以省略就是默认get请求, 大小写都可以 get\post\put\delete\patch
  url: '/user/123',      // 注意 参数传递的那部分要写写到params里面去
  data: { ... },         // 写到这个里面的数据会直接发送出去, 例如json、xml等结构化数据都可以在这个里面发送出去
  params: { ... },       // 写到这个里面的请求参数会拼接到 url 中发送出去  http://xxxx.com/xxx/xxx?参数名1=值1&参数名2=值2
});

一般地：

  • url中要传递参数数据就写到params里面去，get,post方法可以
  • data里面可以传任何参数，特别是文件上传、json、xml等结构化数据都通过这个传，所以POST/PUT 数据会比较多
  • 误区：params只能传递get数据、data只能传POST/PUT 数据（这个结合后端的接收请求接口就好理解了）
  • 除了url，method，data，params都是可选项，根据实际情况判断是否要不要

具体的怎么发送还是要看后端接口是怎么写的
@RequestBody ：参数来源是请求体中的json等结构化数据
@RequestParam ：参数来源可以是url或者请求体的表单数据
@RequestPart：用于上传文件，参数来源是请求体中的表单数据
@PathVariable：参数来源是url中的路径变量

示例1：params传递参数发送get请求

  • 语法: 使用 axios 提供的 params 选项
  • 注意: axios 在运行时把参数名和值，会拼接到 url?参数名=值
  • 城市列表: http://hmajax.itheima.net/api/city?pname=河北省
    在这里插入图片描述
    接口文档
<body>
  <!-- 
    城市列表: http://hmajax.itheima.net/api/city
    参数名: pname
    值: 省份名字
  -->
  <p></p>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    axios({
      url: 'http://hmajax.itheima.net/api/city',
      // 查询参数
      params: {
        pname: '辽宁省'
      }
    }).then(result => {
      console.log(result.data.list)
      document.querySelector('p').innerHTML = result.data.list.join('<br>')
    })
  </script>
</body>

结果：
在这里插入图片描述

示例2：data传递参数发送post请求

参考视频

  • 需求：
    在这里插入图片描述
    接口文档
<body>
  <button class="btn">注册用户</button>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    /*
      注册用户：http://hmajax.itheima.net/api/register
      请求方法：POST
      参数名：
        username：用户名（中英文和数字组成，最少8位）
        password：密码  （最少6位）

      目标：点击按钮，通过axios提交用户和密码，完成注册
    */
    document.querySelector('.btn').addEventListener('click', () => {
      axios({
        url: 'http://hmajax.itheima.net/api/register',
        method: 'POST',
        data: {
          username: 'hejuzs_01',    // 注意，重新注册用户名要修改，同样用户名不能注册两次
          password: 'hejuzs_01'
        }
      })
    })
  </script>
</body>

结果：
在这里插入图片描述

综合案例：地区查询

参考视频

  • 需求：在这里插入图片描述
    接口文档
<!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>案例_地区查询</title>
  <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"> -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <style>
    :root {
      font-size: 15px;
    }

    body {
      padding-top: 15px;
    }
  </style>
</head>

<body>
  <div class="container">
    <form id="editForm" class="row">
      <!-- 输入省份名字 -->
      <div class="mb-3 col">
        <label class="form-label">省份名字</label>
        <input type="text" value="北京" name="province" class="form-control province" placeholder="请输入省份名称" />
      </div>
      <!-- 输入城市名字 -->
      <div class="mb-3 col">
        <label class="form-label">城市名字</label>
        <input type="text" value="北京市" name="city" class="form-control city" placeholder="请输入城市名称" />
      </div>
    </form>
    <button type="button" class="btn btn-primary sel-btn">查询</button>
    <br><br>
    <p>地区列表: </p>
    <ul class="list-group">
      <!-- 示例地区 -->
      <li class="list-group-item">东城区</li>
    </ul>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    /*
      获取地区列表: http://hmajax.itheima.net/api/area
      查询参数:
        pname: 省份或直辖市名字
        cname: 城市名字
    */
   // 目标: 根据省份和城市名字, 查询地区列表
   // 1. 查询按钮-点击事件
   document.querySelector('.sel-btn').addEventListener('click', () => {
    // 2. 获取省份和城市名字
    let p_name = document.querySelector('.province').value
    let c_name = document.querySelector('.city').value

    // 3. 基于axios请求地区列表数据
    axios({
      url: 'http://hmajax.itheima.net/api/area',
      params: {
        pname:p_name,
        cname:c_name
      }
    }).then(result => {
      // console.log(result)
      // 4. 把数据转li标签插入到页面上
      let list = result.data.list
      console.log(list)
      let theLi = list.map(areaName => `<li class="list-group-item">${areaName}</li>`).join('')
      console.log(theLi)
      document.querySelector('.list-group').innerHTML = theLi
    })
   })


  </script>
</body>

</html>

结果：
在这里插入图片描述

4 axios 错误处理

参考视频

  • 语法:在 then 方法的后面，通过点语法调用 catch 方法，传入回调函数并定义形参
    在这里插入图片描述

  • 处理:注册案例，重发注册时通过弹框提示用户错误原因

  • 需求：
    在这里插入图片描述

<!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>axios错误处理</title>
</head>

<body>
  <button class="btn">注册用户</button>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    /*
      注册用户: http://hmajax.itheima.net/api/register
      请求方法: POST
      参数名:
        username: 用户名 (中英文和数字组成, 最少8位)
        password: 密码 (最少6位)

      目标: 点击按钮, 通过axios提交用户和密码, 完成注册
      需求: 使用axios错误处理语法, 拿到报错信息, 弹框反馈给用户
    */
   document.querySelector('.btn').addEventListener('click', () => {
    axios({
      url: 'http://hmajax.itheima.net/api/register',
      method: 'post',
      data: {
        username: 'hejuzs_01',
        password: 'hejuzs_01'
      }
    }).then(result => {
      // 成功
      console.log(result)
    }).catch(error => {      // error里面可以捕获到错误信息，如果后端的java接口抛出异常信息，返回了了一个状态码不正常的响应信息，那么就会进入到catch里面捕获到
      // 失败
      // 处理错误信息
      console.log(error)
      console.log(error.response.data.message)
      alert(error.response.data.message)
    })
   })
  </script>
</body>

</html>

结果：
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Node.js与嵌入式开发：打破界限的创新结合

Node.js与嵌入式开发：打破界限的创新结合

文章目录 一、Node.js的本质与核心优势1.1 什么是Node.js？1.2 嵌入式开发的范式转变二、Node.js与嵌入式结合的四大技术路径2.1 硬件交互层2.2 物联网协议栈2.3 边缘计算架构2.4 轻量化运行时方案三、实战案例：智能农业监测系统3.1 硬件配置3.2 软件架构3.3 核心代码片段四、…
阅读更多...
51c视觉~CV~合集10

51c视觉~CV~合集10

我自己的原文哦~ https://blog.51cto.com/whaosoft/13241694 一、CV创建自定义图像滤镜 热图滤镜 这组滤镜提供了各种不同的艺术和风格化光学图像捕捉方法。例如&#xff0c;热滤镜会将图像转换为“热图”&#xff0c;而卡通滤镜则提供生动的图像&#xff0c;这些图像看起来…
阅读更多...
OPENPPP2 —— VMUX_NET 多路复用原理剖析

OPENPPP2 —— VMUX_NET 多路复用原理剖析

在阅读本文之前&#xff0c;必先了解以下几个概念&#xff1a; 1、MUX&#xff08;Multiplexer&#xff09;&#xff1a;合并多个信号到单一通道。 2、DEMUX&#xff08;Demultiplexer&#xff09;&#xff1a;从单一通道分离出多个信号。 3、单一通道&#xff0c;可汇聚多个…
阅读更多...
核心集：DeepCore: A Comprehensive Library for CoresetSelection in Deep Learning

核心集：DeepCore: A Comprehensive Library for CoresetSelection in Deep Learning

目录 一、TL&#xff1b;DR 二、为什么研究核心集&#xff1f; 三、问题定义和如何做 3.1 问题定义 3.2 业界方法 3.2.1 基于几何的方法 3.2.2 基于不确定性的方法 3.2.3 基于误差/损失的方法 3.2.5 GraNd 和 EL2N 分数 3.2.6 重要性采样 3.2.7 基于决策边界的办法 …
阅读更多...
MyBatis-Plus笔记-快速入门

MyBatis-Plus笔记-快速入门

大家在日常开发中应该能发现&#xff0c;单表的CRUD功能代码重复度很高&#xff0c;也没有什么难度。而这部分代码量往往比较大&#xff0c;开发起来比较费时。 因此&#xff0c;目前企业中都会使用一些组件来简化或省略单表的CRUD开发工作。目前在国内使用较多的一个组件就是…
阅读更多...
Redis - String相关命令

Redis - String相关命令

目录 setgetmsetmgetsetnx、setex、psetexincr、incrby、decr、decrby、incrbyfloatappendgetrangesetrangestrlen字符串类型编码方式总结 Redis - String Redis存储的字符串&#xff0c;是直接按二进制方式存储&#xff0c;不会做任何编码转换&#xff0c;存的是什么&#xff…
阅读更多...
优选算法合集————双指针(专题二)

优选算法合集————双指针(专题二)

好久都没给大家带来算法专题啦&#xff0c;今天给大家带来滑动窗口专题的训练 题目一&#xff1a;长度最小的子数组 题目描述&#xff1a; 给定一个含有 n 个正整数的数组和一个正整数 target 。 找出该数组中满足其和 ≥ target 的长度最小的 连续子数组 [numsl, numsl1, …
阅读更多...
本地Ollama部署DeepSeek R1模型接入Word

本地Ollama部署DeepSeek R1模型接入Word

目录 1.本地部署DeepSeek-R1模型 2.接入Word 3.效果演示 4.问题反馈 上一篇文章办公新利器&#xff1a;DeepSeekWord&#xff0c;让你的工作更高效-CSDN博客https://blog.csdn.net/qq_63708623/article/details/145418457?spm1001.2014.3001.5501https://blog.csdn.net/qq…
阅读更多...
2. K8S集群架构及主机准备

2. K8S集群架构及主机准备

本次集群部署主机分布K8S集群主机配置主机静态IP设置主机名解析ipvs管理工具安装及模块加载主机系统升级主机间免密登录配置主机基础配置完后最好做个快照备份 2台负载均衡器 Haproxy高可用keepalived3台k8s master节点5台工作节点(至少2及以上)本次集群部署主机分布 K8S集群主…
阅读更多...
文字加持：让 OpenCV 轻松在图像中插上文字

文字加持：让 OpenCV 轻松在图像中插上文字

前言 在很多图像处理任务中，我们不仅需要提取图像信息，还希望在图像上加上一些文字，或是标注，或是动态展示。正如在一幅画上添加一个标语，或者在一个视频上加上动态字幕，cv2.putText 就是这个“文字魔术师”，它能让我们的图像从“沉默寡言”变得生动有趣。 今天，我们…
阅读更多...
wsl+phpstorm+xdebug|windows子系统配置phpstorm开发调试|断点调试

wsl+phpstorm+xdebug|windows子系统配置phpstorm开发调试|断点调试

安装wsl 安装apache php 安装xdebug扩展&#xff0c;并配置 这里是通过宝塔9.4面板安装的xdebug3.0 [xdebug] xdebug.modedebug xdebug.start_with_requesttrue xdebug.discover_client_hosttrue xdebug.client_host127.0.0.1配置PHPSTORM 注意&#xff1a;新建服务器一定要…
阅读更多...
5 前端系统开发：Vue2、Vue3框架（上）：Vue入门式开发和Ajax技术

5 前端系统开发：Vue2、Vue3框架（上）：Vue入门式开发和Ajax技术

文章目录 前言一、Vue框架&#xff08;简化DOM操作的一个前端框架&#xff09;&#xff1a;基础入门1 Vue基本概念2 快速入门&#xff1a;创建Vue实例&#xff0c;初始化渲染&#xff08;1&#xff09;创建一个入门Vue实例&#xff08;2&#xff09;插值表达式&#xff1a;{{表…
阅读更多...
语言月赛 202412【顽强拼搏奖的四种发法】题解（AC）

语言月赛 202412【顽强拼搏奖的四种发法】题解（AC）

》》》点我查看「视频」详解》》》 [语言月赛 202412] 顽强拼搏奖的四种发法 题目描述 在 XCPC 竞赛里&#xff0c;会有若干道题目&#xff0c;一支队伍可以对每道题目提交若干次。我们称一支队伍对一道题目的一次提交是有效的&#xff0c;当且仅当&#xff1a; 在本次提交…
阅读更多...
nodejs：express + js-mdict 网页查询英汉词典，能播放声音

nodejs：express + js-mdict 网页查询英汉词典，能播放声音

向 DeepSeek R1 提问&#xff1a; 我想写一个Web 前端网页&#xff0c;后台用 nodejs js-mdict, 实现在线查询英语单词 1. 项目结构 首先&#xff0c;创建一个项目目录&#xff0c;结构如下&#xff1a; mydict-app/ ├── public/ │ ├── index.html │ ├── st…
阅读更多...
使用Pygame制作“太空侵略者”游戏

使用Pygame制作“太空侵略者”游戏

1. 前言 在 2D 游戏开发中&#xff0c;“太空侵略者”是一款入门难度适中、却能覆盖多种常见游戏机制的项目&#xff1a; 玩家控制飞船&#xff08;Player&#xff09;左右移动&#xff0c;发射子弹。敌人&#xff08;Enemy&#xff09;排列成一行或多行&#xff0c;从屏幕顶…
阅读更多...
Linux find 命令 | grep 命令 | 查找 / 列出文件或目录路径 | 示例

Linux find 命令 | grep 命令 | 查找 / 列出文件或目录路径 | 示例

注&#xff1a;本文为 “Linux find 命令 | grep 命令使用” 相关文章合辑。 未整理去重。 如何在 Linux 中查找文件 作者&#xff1a; Lewis Cowles 译者&#xff1a; LCTT geekpi | 2018-04-28 07:09 使用简单的命令在 Linux 下基于类型、内容等快速查找文件。 如果你是 W…
阅读更多...
JVM 四虚拟机栈

JVM 四虚拟机栈

虚拟机栈出现的背景 由于跨平台性的设计&#xff0c;Java的指令都是根据栈来设计的。不同平台CPU架构不同&#xff0c;所以不能设计为基于寄存器的。优点是跨平台&#xff0c;指令集小&#xff0c;编译器容易实现&#xff0c;缺点是性能下降&#xff0c;实现同样的功能需要更多…
阅读更多...
排序算法与查找算法

排序算法与查找算法

1.十大经典排序算法 我们希望数据以一种有序的形式组织起来&#xff0c;无序的数据我们要尽量将其变得有序 一般说来有10种比较经典的排序算法 简单记忆为Miss D----D小姐 时间复杂度 &#xff1a;红色<绿色<蓝色 空间复杂度&#xff1a;圆越大越占空间 稳定性&…
阅读更多...
Spring理论知识（Ⅴ）——Spring Web模块

Spring理论知识（Ⅴ）——Spring Web模块

Spring的组成 Spring由20个核心依赖组成&#xff0c;这20个核心依赖可以分为6个核心模块 Spring Web模块简介 众所周知&#xff0c;Java目前最大的一个用途就是作为Web应用的服务端&#xff08;Java Web&#xff09; Spring又是JavaEE中使用最广泛的开发框架&#xff0…
阅读更多...
（10） 如何获取 linux 系统上的 TCP 、 UDP 套接字的收发缓存的默认大小，以及代码范例

（10） 如何获取 linux 系统上的 TCP 、 UDP 套接字的收发缓存的默认大小，以及代码范例

&#xff08;1&#xff09; 先介绍下后面的代码里要用到的基础函数&#xff1a; 以及&#xff1a; &#xff08;2&#xff09; 接着给出现代版的 读写 socket 参数的系统函数 &#xff1a; 以及&#xff1a; &#xff08;3&#xff09; 给出 一言的 范例代码&#xff0c;获取…
阅读更多...
最新文章

Copyright @ 2022~2023