AJAX 01 AJAX 概念和 axios 使用

2.27

AJAX 学习

  • AJAX 1 入门
    • 01 AJAX 概念和 axios 使用
      • axios 使用
      • 案例
    • 02 认识 URL
      • URL组成
    • 03 URL 查询参数
      • axios－查询参数
      • 案例 ：地区查询
    • 04 常用请求方法和数据提交
      • axios 请求配置
      • axios 错误处理
    • 05 HTTP协议-报文
      • ① 请求报文
        • 作用：错误排查
      • ② 响应报文
    • 06 接口文档
    • 07 案例 - 用户登录
    • 08 form-serialize 插件

本笔记为 观看B站教学视频 BV1MN411y7pw 后 个人整理的笔记。

AJAX 1 入门

01 AJAX 概念和 axios 使用

总结：
1. AJAX 有什么用？
➢ 浏览器和服务器之间通信，动态数据交互
2. AJAX 如何学：
➢ 先掌握 axios 使用
➢ 再了解 XMLHttpRequest 原理
3. 这一节 axios 体验步骤？
➢ 引入 axios 库
➢ 使用 axios 语法

Ajax即Asynchronous Javascript And XML（异步JavaScript和XML）

简单来说，就是使用 XMLHttpRequest 对象与服务器通信。

AJAX 是浏览器与服务器进行数据通信的技术。
在这里插入图片描述

怎么用 AJAX ？

  1. 先使用 axios [æk‘sioʊs] 库，与服务器进行数据通信

  • 基于 XMLHttpRequest 封装、代码简单、月下载量在 14 亿次

  • Vue、React 项目中都会用到 axios

  1. 再学习 XMLHttpRequest 对象的使用，了解 AJAX 底层原理

axios 使用

在这里插入图片描述

案例

需求：请求目标资源地址，拿到省份列表数据，显示到页面

目标资源地址：http://hmajax.itheima.net/api/province

<body>
  <p class="my-p"></p>
</body>
<!-- 1 引入axios库 -->
<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.data.list);
    console.log(result.data.list.join('<br>'));

    document.querySelector('.my-p').innerHTML = result.data.list.join('<br>')
  })
</script>

在这里插入图片描述

02 认识 URL

总结
1. URL 是什么：
➢ 统一资源定位符，网址，用于访问服务器上资源
2. 请解释这个 URL，每个部分作用？
➢ http://hmajax.itheima.net/api/news
➢ 协议://域名/资源路径

在这里插入图片描述

例如：

• https://www.baidu.com/index.html 网页资源

• https://www.itheima.com/images/logo.png 图片资源

• http://hmajax.itheima.net/api/province 数据资源

概念：URL 就是统一资源定位符，简称网址，用于访问网络上的资源

URL组成

在这里插入图片描述

① 协议

http 协议：超文本传输协议，规定浏览器和服务器之间传输数据的格式

在这里插入图片描述

② 域名

域名：标记服务器在互联网中方位
在这里插入图片描述

③ 资源路径

资源路径：标记资源在服务器下的具体位置

03 URL 查询参数

1. URL 查询参数有什么作用？
➢ 浏览器提供给服务器额外信息，获取对应的数据
2. axios 要如何携带查询参数？
➢ 使用 params 选项，携带参数名和值

定义：浏览器提供给服务器的额外信息，让服务器返回浏览器想要的数据

在这里插入图片描述

axios－查询参数

这是 axios 库的语法

语法：使用 axios 提供的 params 选项

请注意params 左边的参数名是 后端定义的。参数名 和 值的引用名字相同的时候可以只写一个。 比如params {pname（这里是后端定义的名字）: pname（这里是前端我们定义的变量名字）}，此时可以简化成 params { pname }

注意：axios 在运行时把参数名和值，会拼接到 url?参数名=值

城市列表：http://hmajax.itheima.net/api/city?pname=河北省

在这里插入图片描述

<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);
  })
</script>

案例 ：地区查询

需求： 根据输入的省份名字和城市名字，查询地区并渲染列表

分析：

首先：确定 URL 网址和参数说明

• 查询某个省内某个城市的所有地区: http://hmajax.itheima.net/api/area

• 参数名：

​ pname：省份名字或直辖市名字，比如北京、福建省、辽宁省…

​ cname：城市名字，比如北京市、厦门市、大连市…

完整：http://hmajax.itheima.net/api/area?pname=北京&cname=北京市

这里北京没有引号，？ & 也不可以漏掉

04 常用请求方法和数据提交

1. 请求方法表明对服务器资源的操作，最为常用的2个是？
➢ POST 提交数据，GET 查询数据
2. axios 的核心配置？
➢ url：请求 URL 网址
➢ method：请求方法，GET 可以省略（不区分大小写）
➢ params：查询参数
➢ data：提交数据

在这里插入图片描述

场景：当数据需要在服务器上保存（比如我们的账号信息 手机和网页上同步）

POST 数据提交，带着自己的 data

GET 获取数据，params 中的变量存储数据

axios 请求配置

url：请求的 URL 网址

method：请求的方法，GET 可以省略（不区分大小写）

data：提交数据

在这里插入图片描述

数据提交－注册账号

需求： 通过 axios 提交用户名和密码，完成注册功能

注册用户 URL 地址：http://hmajax.itheima.net/api/register

请求方法：POST

参数名：

username 用户名（中英文和数字组成，最少 8 位）

password 密码（最少 6 位）
在这里插入图片描述

如果有报错信息，那么点开axios的报错信息之后，找到response的data查看信息

  <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: 'haokuna',
          password: '234511'
        }
      }).then(result => {
        console.log(result);
      })
    })
  </script>

axios 错误处理

场景：再次注册相同的账号，会遇到报错信息

处理：用更直观的方式，给普通用户展示错误信息

如果有报错信息，那么点开axios的报错信息之后，找到response的data查看信息

在这里插入图片描述

05 HTTP协议-报文

浏览器是怎么把内容发送给服务器的呢？

① 请求报文

总结
1. 浏览器发送给服务器的内容叫做请求报文
2. 请求报文的组成：
3. 通过 Chrome 的网络面板查看请求报文

HTTP 协议：规定了浏览器发送及服务器返回内容的格式

请求报文：浏览器按照 HTTP 协议要求的格式，发送给服务器的内容

服务器会使用相应的格式解析请求报文，就知道浏览器想要干什么

在这里插入图片描述

  1. 请求行：请求方法，URL，协议（遵守什么协议）
  2. 请求头：以键值对的格式携带的附加信息，比如：Content-Type
  3. 空行：分隔请求头，空行之后的是发送给服务器的资源
  4. 请求体：发送的资源
    在这里插入图片描述

Content-Type规定这次请求时携带的内容类型

axios会把代码中的data对象转化为JSON字符串，携带到请求报文中。

在浏览器怎么查看请求报文

在这里插入图片描述

作用：错误排查

需求：通过请求报文排查错误原因，并修复

案例：输入正确的用户名和密码无法登录

用户名：itheima007

密码：7654321

思路：

① 确认了一下输入了正确的用户名和密码确实无法登录 ② 用户名和密码是在后端判断正确的。那么用户名和密码真的携带到了请求报文中吗？我们要在请求报文中验证一下 ③ 在报文中发现密码错误

② 响应报文

HTTP 协议：规定了浏览器发送及服务器返回内容的格式

响应报文：服务器按照 HTTP 协议要求的格式，返回给浏览器的内容

  1. 响应行（状态行）：协议、HTTP 响应状态码、状态信息

  2. 响应头：以键值对的格式携带的附加信息，比如：Content-Type

    Content-Type规定服务器返回的内容类型，如下图是 JSON

  3. 空行：分隔响应头，空行之后的是服务器返回的资源

  4. 响应体：返回的资源

在这里插入图片描述

404：网址写错了，服务器找不到这个资源。

总结
1. 响应报文的组成：
响应行（状态行）：协议、HTTP 响应状态码、状态信息
响应头：以键值对的格式携带的附加信息，比如 Content-Type
空行：分隔响应头，空行之后的是返回给浏览器的资源
响应体：返回的资源
2. HTTP 响应状态码用来表明请求是否成功完成

06 接口文档

接口文档：描述接口的文章 （后端工程师）

接口：使用 AJAX 和服务器通讯时，使用的 URL，请求方法，以及参数

更多的接口文档案例：传送门 https://apifox.com/apidoc/shared-1b0dd84f-faa8-435d-b355-5a8a329e34a8
在这里插入图片描述

黑马教学视频 的接口文档：https://apifox.com/apidoc/shared-1b0dd84f-faa8-435d-b355-5a8a329e34a8

知识点补充：axios在看到 data后面是对象的时候，就会把它转换成 JSON字符串
在这里插入图片描述

  • json 表示字符串

  • body参数就是 请求体

总结：
接口文档：由后端提供的描述接口相关信息的文章
前端工程师根据这个文档找到想使用的功能接口，根据URL网址、请求方法、要携带的参数和相应的位置，来与服务器进行数据的交互。

07 案例 - 用户登录

V:\Web\mycode\AJAX\1-8案例_登录.html

V:\Web\mycode\AJAX\1-9案例_登录_提示信息.html

用户登录：

  1. 点击登录时，判断用户名和密码长度（在接口文档中后端规定密码长度
  2. 提交数据和服务器通信
  3. 提示信息
    document.querySelector('.btn-login').addEventListener('click', 
    ()=> {
      const username = document.querySelector('.username').value
      const password = document.querySelector('.password').value

      //用户名和密码长度判断:
      if(username.length < 8) {
        console.log('用户名必须大于等于8位');
        return
      }

      if(password.length < 6) {
        console.log('密码必须大于等于6位');
        return
      }

      // 提交数据和服务器通信
      axios({
        url: 'http://hmajax.itheima.net/api/login',
        method: 'post',
        data: {
          // 这里为什么用data不用params
          // POST数据提交，带着自己的data
          // GET获取数据，params中的变量存储数据
          username,
          password
          // itheima007, 7654321
        }
      }).then(result => {
        console.log(result.data.message);
      }).catch(error => {
        console.log(error.response.data.message);
      })
    })

08 form-serialize 插件

作用：快速收集表单元素的值

语法：

const form = document.querySelector('form')
const res = serialize(form, {hash:true, empty: true})

参数：

  • hash 设置获取的数据结构

    true：JS 对象（推荐），false：查询字符串

  • empty设置是否获取空值

    true：获取空值（推荐，保证数据结构和标签结构一致），false：不获取空值

使用步骤： ① 引入 form-serialize 插件 ② 获取form ，并保证所有表单元素都有name属性，且与接口文档一致 ③ 对象解构（在属性和变量名同名的时候可以简写 -pink js P159）

表单元素必须设置name属性（强烈介意和和接口文档一致），值会作为对象的属性名
在这里插入图片描述

<body>
  <form action="javascript:;" class="example-form">
    <input type="text" name="username">
    <br>
    <input type="text" name="password">
    <br>
    <input type="button" class="btn" value="提交">
  </form>
  <!-- 
    目标：在点击提交时，使用form-serialize插件，快速收集表单元素值
    1. 把插件引入到自己网页中
  -->
  <script src="./lib/form-serialize.js"></script>
  <script>
    document.querySelector('.btn').addEventListener('click',
    ()=> {
      // 参数一 获取哪个表单
      // 参数二 配置对象
      const form = document.querySelector('.example-form')

      const res = serialize(form, {hash:true, empty: true})
      console.log(res);
    })
  </script>
</body>

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

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

相关文章

uniapp微信小程序_自定义交费逻辑编写

uniapp微信小程序_自定义交费逻辑编写

一、首先看最终效果 先说下整体逻辑,选中状态为淡紫色,点击哪个金额,充值页面上就显示多少金额 二、代码 <view class"addMoney"><view class"addMoneyTittle">充值金额</view><view class"selfaddmoney" :class"{…
阅读更多...
力扣日记3.14-【贪心算法篇】376. 摆动序列

力扣日记3.14-【贪心算法篇】376. 摆动序列

力扣日记&#xff1a;【贪心算法篇】376. 摆动序列 日期&#xff1a;2024.3.14 参考&#xff1a;代码随想录、力扣 376. 摆动序列 题目描述 难度&#xff1a;中等 如果连续数字之间的差严格地在正数和负数之间交替&#xff0c;则数字序列称为 摆动序列 。第一个差&#xff08;…
阅读更多...
【总结】服务器无法连接外网，设置http代理解决

【总结】服务器无法连接外网，设置http代理解决

问题 某天想要在服务器上下载编译github上某开源项目&#xff0c;结果发现访问不了外网。 于是找运维&#xff0c;运维给了个http代理服务器地址。简单操作后&#xff0c;就可以访问外网了。 解决 在需要访问外网的机器上&#xff0c;执行以下命令&#xff1a;http_proxyhtt…
阅读更多...
rust学习（简单链表）

rust学习（简单链表）

编写一个简单链表&#xff0c;主要遇到的问题就是next指针&#xff08;按照C的写法&#xff09;的数据如何定义。按照网上的建议&#xff0c;一般定义如下&#xff1a; struct Node {pub value:u32,pub next:Option<Rc<RefCell<Node>>>, //1 }1.用Option主要…
阅读更多...
GoLang：云原生时代致力于构建高性能服务器的后端语言

GoLang：云原生时代致力于构建高性能服务器的后端语言

Go语言的介绍 概念 Golang&#xff08;也被称为Go&#xff09;是一种编程语言&#xff0c;由Google于2007年开始设计和开发&#xff0c;并于2009年首次公开发布。Golang是一种静态类型、编译型的语言&#xff0c;旨在提供高效和可靠的软件开发体验。它具有简洁的语法、高效的编…
阅读更多...
外卖小程序-购物车模块表结构设计和后端代码

外卖小程序-购物车模块表结构设计和后端代码

表结构设计 添加购物车代码 Service public class ShoppingCartServiceImpl implements ShoppingCartService {Autowiredprivate ShoppingCartMapper shoppingCartMapper;Autowiredprivate DishMapper dishMapper;Autowiredprivate SetmealMapper setmealMapper;/*** 添加购物…
阅读更多...
在浏览器的控制台定义变量，清除后还是报错变量已声明

在浏览器的控制台定义变量，清除后还是报错变量已声明

报错&#xff1a;Uncaught SyntaxError: Identifier words has already been declared 在浏览器的控制台&#xff08;Console&#xff09;中定义的变量是全局变量&#xff0c;它们会保留在当前的浏览器窗口或标签页的生命周期中。即使你清除了控制台的内容&#xff08;例如通过…
阅读更多...
[云原生] Prometheus自动服务发现部署

[云原生] Prometheus自动服务发现部署

一、部署服务发现 1.1 基于文件的服务发现 基于文件的服务发现是仅仅略优于静态配置的服务发现方式&#xff0c;它不依赖于任何平台或第三方服务&#xff0c;因而也是最为简单和通用的实现方式。 Prometheus Server 会定期从文件中加载 Target 信息&#xff0c;文件可使用 YAM…
阅读更多...
基于Java的海南旅游景点推荐系统(Vue.js+SpringBoot)

基于Java的海南旅游景点推荐系统(Vue.js+SpringBoot)

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 用户端2.2 管理员端 三、系统展示四、核心代码4.1 随机景点推荐4.2 景点评价4.3 协同推荐算法4.4 网站登录4.5 查询景点美食 五、免责说明 一、摘要 1.1 项目介绍 基于VueSpringBootMySQL的海南旅游推荐系统&#xff…
阅读更多...
使用stream流合并多个List（根据实体类特定属性合并）

使用stream流合并多个List（根据实体类特定属性合并）

开发情景 现有多个List集合，其中都是一样的实体类，这里我想根据实体类的特定属性将它们合并在一起，形成一个最终的List集合。 这里主要用到了Stream流的flatMap方法与reduce方法。 flatMap：可以将多个Stream流合并在一起，形成一个Stream流。 reduce：可以将Stram流中的元…
阅读更多...
Oracle登录错误ERROR: ORA-01031: insufficient privileges解决办法

Oracle登录错误ERROR: ORA-01031: insufficient privileges解决办法

这个问题困扰了我三个星期&#xff0c;我在网上找的解决办法&#xff1a; 1.控制面板->管理工具->计算机管理->系统工具->本地用户和组->ORA_DBA组。 但我电脑上根本找不到。 2.在oracle安装目录下找到oradba.exe运行。 最开始我都不到这个oradba.exe文件在哪…
阅读更多...
Java基于微信小程序的校园订餐小程序的研究与实现，附源码

Java基于微信小程序的校园订餐小程序的研究与实现，附源码

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…
阅读更多...
Linux本地部署开源AI的PDF工具—Stirling PDF并实现公网随时访问

Linux本地部署开源AI的PDF工具—Stirling PDF并实现公网随时访问

文章目录 1. 安装Docker2. 本地安装部署StirlingPDF3. Stirling-PDF功能介绍4. 安装cpolar内网穿透5. 固定Stirling-PDF公网地址 本篇文章我们将在Linux上使用Docker在本地部署一个开源的PDF工具——Stirling PDF&#xff0c;并且结合cpolar的内网穿透实现公网随时随地访问。 S…
阅读更多...
PBKDF2算法：保障密码安全的利器

PBKDF2算法：保障密码安全的利器

title: PBKDF2算法&#xff1a;保障密码安全的利器 date: 2024/3/14 16:40:05 updated: 2024/3/14 16:40:05 tags: PBKDF2算法密码安全性迭代盐值密钥 PBKDF2算法起源&#xff1a; PBKDF2&#xff08;Password-Based Key Derivation Function 2&#xff09;算法是一种基于密码…
阅读更多...
Pycharm / idea上传项目到 Github 报错

Pycharm / idea上传项目到 Github 报错

报错内容: gitgithub.com: Permission denied (publickey).翻译–>gitgithub.com:权限被拒绝(公钥). 出现上述报错的原因:   客户端与服务端的ssh key不匹配   客户端与服务端未生成 ssh key 登录上Github查看ssh key是否存在&#xff0c;如果存在&#xff0c;那么可以对…
阅读更多...
机器学习-0X-神经网络

机器学习-0X-神经网络

总结 本系列是机器学习课程的系列课程&#xff0c;主要介绍机器学习中神经网络算法。 本门课程的目标 完成一个特定行业的算法应用全过程&#xff1a; 懂业务会选择合适的算法数据处理算法训练算法调优算法融合 算法评估持续调优工程化接口实现 参考 机器学习定义 关于机…
阅读更多...
手写简易操作系统(八)--特权级以及TSS

手写简易操作系统(八)--特权级以及TSS

前情提要 我们在这里梳理一下上面几节讲的内容 首先是计算机开机&#xff0c;BIOS接过第一棒&#xff0c;将第一个扇区MBR的内容导入到内存 0x7c00 的位置。 然后就是MBR中我们自己写的内容&#xff0c;将Loader导入到 0x600 的地址&#xff0c;Loader设置了GDT&#xff0c;…
阅读更多...
智能工厂核心功能系统-MES生产管理系统

智能工厂核心功能系统-MES生产管理系统

MES在未来智能制造中扮演着至关重要的角色&#xff0c;通过其在生产管理中的应用&#xff0c;将帮助企业实现智能化转型&#xff0c;提升生产效率和产品质量&#xff0c;推动整个制造业向着更加智能、高效、可持续的方向发展。 通过对MES在未来智能制造发展趋势中的地位进行深…
阅读更多...
ip广播智慧工地广播喊话号角 IP网络号角在塔吊中应用 通过寻呼话筒预案广播

ip广播智慧工地广播喊话号角 IP网络号角在塔吊中应用 通过寻呼话筒预案广播

ip广播智慧工地广播喊话号角 IP网络号角在塔吊中应用 通过寻呼话筒预案广播 SV-704XT是深圳锐科达电子有限公司的一款壁挂式网络有源号角&#xff0c;具有10/100M以太网接口&#xff0c;可将网络音源通过自带的功放和号角喇叭输出播放&#xff0c;可达到功率50W。SV-704XT内置有…
阅读更多...
如何配置Apache的反向代理

如何配置Apache的反向代理

目录 前言 一、反向代理的工作原理 二、Apache反向代理的配置 1. 安装Apache和相关模块 2. 配置反向代理规则 3. 重启Apache服务器 三、常见的使用案例 1. 负载均衡 2. 缓存 3. SSL加密 总结 前言 随着Web应用程序的不断发展和扩展&#xff0c;需要处理大量的请求和…
阅读更多...
最新文章

Copyright @ 2022~2023