AJAX 1——axios体验、认识URL、常用请求方法、HTTP协议、错误处理、form-serialize插件

AJAX 1——axios体验、认识URL、常用请求方法、HTTP协议、错误处理、form-serialize插件

1.AJAX入门与体验axios

  • 定义：浏览器与服务器进行数据通信的技术

  • 体验axios库，与服务器通信

    • 引入axios.js
    • 使用axios函数
    <p class="my-p"></p><!-- 1.引入axios库 --><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>// 2.使用axios函数axios({url: 'http://ajax-api.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>')})

2.认识URL

  • URL定义：统一资源定位符，简称网址，因特网上标准的资源的地址

  • URL组成：协议://域名/资源路径

    • 协议：规定浏览器与服务器之间传输数据的格式
    • 域名：标记服务器在互联网的方位
    • 资源路径：标记资源在服务器下的具体路径

  • URL查询参数

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

    • 语法：http://xxxx.com/xxx/xxx?参数名1=值1&参数名2=值2

    • 使用params选项，axios在运行时会把参数名和值拼接到url?参数名=值

      <!-- 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/city',params: {pname: '陕西省'}}).then(result => {document.querySelector('.my-p').innerHTML = result.data.list.join('<br>')})

  • 案例：地区查询（通过多个参数查询）

    <!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>04.案例_地区查询</title><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/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>/*获取地区列表: 查询参数:pname: 省份或直辖市名字cname: 城市名字*/const button = document.querySelector('button')button.addEventListener('click', function () {const list = document.querySelector('.list-group')const province = document.querySelector('[name=province]').valueconst city = document.querySelector('[name=city]').valueaxios({url: 'http://hmajax.itheima.net/api/area',params: {pname: province,cname: city}}).then(result => {// list.removeChild(document.querySelectorAll('.list-group-item'))console.log(result)const lists = result.data.list.map(function (item) {return `<li class="list-group-item">${item}</li>`}).join('')list.innerHTML = lists})})</script>
</body></html>

3.常用请求方法

  • Get：获取数据(默认)

  • POST：提交数据

     document.querySelector('.btn').addEventListener('click', () => {axios({url: 'http://hmajax.itheima.net/api/register',method: 'post',data: {username: 'xxg213421',password: '1233432'}}).then(result => {console.log(result)})})

  • PUT：修改数据

  • DELETE：删除数据

  • PATCH：修改数据（部分）

  • axios请求配置：

    • url：请求的URL网址
    • method：请求的方法，GET可以省略
    • data：提交的数据

4.axios错误处理

  • 在then方法后面，通过点语法调用catch方法，传入回调函数并定义形参

    document.querySelector('.btn').addEventListener('click', () => {axios({url: 'http://hmajax.itheima.net/api/register',method: 'post',data: {username: 'xxg213421',password: '1233432'}}).then(result => {console.log(result)}).catch(error => {  //处理错误信息console.log(error.response.data.message)alert(error.response.data.message)})})

5.HTTP协议

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

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

    • 组成部分4个：

      • 请求行：请求方法，URL，协议
      • 请求头：以键值对的格式携带的附加信息，eg:Content-Type
      • 空行：分隔请求头与请求体
      • 请求体：发送的资源

    • 怎么在浏览器中查看：右键检查——>网络——>Fetch/XHR——>选择某次想要看的信息进行查看

    • 通过请求报文进行错误排查——去看报文中的载荷，以及响应结果

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

    • 组成部分4个：

      • 响应行：协议，HTTP响应状态码，状态信息
      • 响应头：以键值对的格式携带的附加信息，eg:Content-Type
      • 空行：分隔响应头和响应体
      • 响应体：返回的资源

    • HTTP响应状态码：

      状态码说明
      1XX信息
      2XX成功
      3XX重定向消息
      4XX客户端错误（浏览器）
      5XX服务器错误

6.接口文档

  • 定义：后端提供的描述接口的文档，接口就是使用AJAX和服务器通讯时，使用的URL，请求方法以及参数

  • 登录注册案例：(注意这里的服务器及接口是别人的，可以自己写)

    • 注册：这里的注册没有使用输入框数据,直接通过代码发送的
    <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: 'lyq20040110',password: '20040110'}}).then(result => {console.log(result)}).catch(error => {  //处理错误信息console.log(error.response.data.message)alert(error.response.data.message)})})</script>

  • 登录：和前面注册用的服务器是同一个，所以上面注册的信息可以登陆成功

    <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>12.案例_登录_提示消息</title><!-- 引入bootstrap.css --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"><!-- 公共 --><style>html,body {background-color: #EDF0F5;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;}.container {width: 520px;height: 540px;background-color: #fff;padding: 60px;box-sizing: border-box;}.container h3 {font-weight: 900;}</style><!-- 表单容器和内容 --><style>.form_wrap {color: #8B929D !important;}.form-text {color: #8B929D !important;}</style><!-- 提示框样式 --><style>.alert {transition: .5s;opacity: 0;}.alert.show {opacity: 1;}</style>
</head><body><div class="container"><h3>欢迎-登录</h3><!-- 登录结果-提示框 --><div class="alert alert-success" role="alert">提示消息</div><!-- 表单 --><div class="form_wrap"><form><div class="mb-3"><label for="username" class="form-label">账号名</label><input type="text" class="form-control username"></div><div class="mb-3"><label for="password" class="form-label">密码</label><input type="password" class="form-control password"></div><button type="button" class="btn btn-primary btn-login"> 登 录 </button></form></div></div><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>// 目标1：点击登录时，用户名和密码长度判断，并提交数据和服务器通信// 目标2：使用提示框，反馈提示消息//获取提示框//功能：//1.显示提示框//2.不同提示文字，成功绿色不成功红色//3.两秒后自动消失const myAlert = document.querySelector('.alert')function alertFn(isSuccess, msg) {myAlert.classList.add('show')myAlert.innerHTML = msgconst bgStyle = isSuccess ? 'alert-success' : 'alert-danger'myAlert.classList.add(bgStyle)setTimeout(() => {myAlert.classList.remove('show')//重置背景色myAlert.classList.remove(bgStyle)}, 2000)}// 1.1 登录-点击事件document.querySelector('.btn-login').addEventListener('click', () => {// 1.2 获取用户名和密码const username = document.querySelector('.username').valueconst password = document.querySelector('.password').value// console.log(username, password)// 1.3 判断长度if (username.length < 8) {console.log('用户名必须大于等于8位')alertFn(false, '用户名必须大于等于8位')return // 阻止代码继续执行}if (password.length < 6) {console.log('密码必须大于等于6位')alertFn(false, '密码必须大于等于6位')return // 阻止代码继续执行}// 1.4 基于axios提交用户名和密码// console.log('提交数据到服务器')axios({url: 'http://hmajax.itheima.net/api/login',method: 'POST',data: {username,password}}).then(result => {console.log(result)console.log(result.data.message)alertFn(true, '登陆成功')}).catch(error => {console.log(error)console.log(error.response.data.message)alertFn(false, '用户名或密码不正确')})})</script>
</body>
</html>

7.form-serialize插件

  • 作用：快速收集表单元素的值
<body><form action="javascript:;" class="example-form"><input type="text" name="uname"><br><input type="text" name="pwd"><br><input type="button" class="btn" value="提交"></form><!-- 目标：在点击提交时，使用form-serialize插件，快速收集表单元素值--><!-- 引入插件 --><script src="./form-serialize.js"></script><script>document.querySelector('.btn').addEventListener('click', () => {// 使用serialize函数const form = document.querySelector('.example-form')//参数1：获取哪个表单参数 //**表单属性要设置name值，值会作为对象的属性名//**建议name属性的值和接口文档参数名一致 //参数2：配置对象//**hash:设置获取的数据结构——推荐为true//****true:JS对象//****false:查询字符串——推荐为true//**empty:是否获取空值const data = serialize(form, { hash: true, empty: true })console.log(data)})</script>
</body>
</html>

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

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

相关文章

SQL中如何进行 ‘’撤销‘’ 操作-详解

SQL中如何进行 ‘’撤销‘’ 操作-详解

在 SQL 中&#xff0c;撤销已经执行的操作通常涉及两个主要的概念&#xff1a;事务控制和回滚操作。 ### 1. 事务控制 在支持事务的数据库管理系统&#xff08;如 MySQL 的 InnoDB 引擎&#xff09;中&#xff0c;您可以使用事务来确保数据的完整性。事务可以确保一系列的操作…
阅读更多...
YOLOv11改进，YOLOv11添加DCNv4可变性卷积(windows系统成功编译)，二次创新C2f结构，全网最详细教程

YOLOv11改进，YOLOv11添加DCNv4可变性卷积(windows系统成功编译)，二次创新C2f结构，全网最详细教程

改进训练结果前： 二次创新C2f结构训练结果： 摘要 引入了可变形卷积 v4 (DCNv4)，这是一种为广泛视觉应用设计的高效且有效的操作算子。DCNv4通过两项关键增强解决了其前身DCNv3的局限性：1. 移除空间聚合中的softmax归一化，以增强其动态特性和表达能力；2. 优化内存访问以…
阅读更多...
灵动微高集成度电机MCU单片机

灵动微高集成度电机MCU单片机

由于锂电技术的持续进步、消费者需求的演变、工具种类的革新以及应用领域的扩展&#xff0c;电动工具行业正呈现出无绳化、锂电化、大功率化、小型化、智能化和一机多能化的发展趋势。无绳化和锂电化的电动工具因其便携性和高效能的特性&#xff0c;已成为市场增长的重要驱动力…
阅读更多...
Task与 async 和await关键字使用和探讨

Task与 async 和await关键字使用和探讨

基本概念&#xff1a; Task (任务): 在 .NET 中&#xff0c;Task 表示一个可能会在未来完成的操作&#xff0c;可以是异步的&#xff0c;也可以是同步的。Task<TResult> 是返回结果的任务&#xff0c;而 Task 是不返回结果的任务。async 关键字: 标记一个方法为异步方法…
阅读更多...
Linux：进程的创建、终止和等待

Linux：进程的创建、终止和等待

一、进程创建 1.1 fork函数初识 #include pid_t fork(void); 返回值&#xff1a;子进程中返回0&#xff0c;父进程返回子进程id&#xff0c;出错返回-1 调用fork函数后&#xff0c;内核做了下面的工作&#xff1a; 1、创建了一个子进程的PCB结构体、并拷贝一份相同的进程地址…
阅读更多...
JavaScript for循环语句

JavaScript for循环语句

for循环 循环语句用于重复执行某个操作&#xff0c;for语句就是循环命令&#xff0c;可以指定循环的起点、终点和终止条件。它的格式如下 for(初始化表达式;条件;迭代因子){语句} for语句后面的括号里面&#xff0c;有三个表达式 初始化表达式(initialize):确定循环变量的初始…
阅读更多...
27 Vue3之unocss原子化

27 Vue3之unocss原子化

前置知识 什么是原子化 CSS 原子化 CSS 是一种 CSS 的架构方式&#xff0c;它倾向于小巧且用途单一的 class&#xff0c;并且会以视觉效果进行命名。 为什么使用 原子化 CSS 传统方案 制作原子化 CSS 的传统方案其实就是提供所有你可能需要用到的 CSS 工具。例如&#xff0c…
阅读更多...
05：（寄存器开发）定时器一

05：（寄存器开发）定时器一

定时器 1、系统定时器SysTick1.1、SysTick中断的使用1.2、使用SysTick制作延迟函数 2、基本定时器2.1、基本定时器中断的使用2.2、使用基本定时器制作延时函数 1、系统定时器SysTick 1.1、SysTick中断的使用 ①SysTcik系统滴答定时器和片上外设定时器不同&#xff0c;它在CPU…
阅读更多...
第十一章 缓存之更新/穿透/雪崩/击穿

第十一章 缓存之更新/穿透/雪崩/击穿

目录 一、什么是缓存 二、缓存更新策略 2.1. 缓存主动更新策略 2.1.1. Cache Aside模式&#xff08;主流&#xff09;‌ 2.1.2. Read/Write Through模式‌ 2.1‌.3. Write Behind模式‌ 2.1.4. 总结 三、缓存穿透 四、缓存雪崩 五、缓存击穿 5.1. 互斥锁实现 5.1.1…
阅读更多...
C语言复习概要（四）

C语言复习概要（四）

本文 1. 操作符的分类算术操作符关系操作符逻辑操作符 2. 二进制制和进制转换二进制与十六进制的表示进制转换算法 3. 原码、反码和补码原码反码补码 1. 操作符的分类 C语言中的操作符种类繁多&#xff0c;常用的主要操作符可以按照其功能进行如下分类&#xff1a; 算术操作符…
阅读更多...
Unity 快速定位到目标文件夹

Unity 快速定位到目标文件夹

主要给习惯垂直布局用的&#xff0c;文件多了滚动都要滚半天 放到Editor下面&#xff0c;快捷键alt 文件夹首字母 public class EditorTool {//AltP打开资源路径[MenuItem("快捷方式/定位到预制体")]static void OpenResourcesUIPanel(){Selection.activeObject A…
阅读更多...
【开源开放体系总结】

【开源开放体系总结】

书生・浦语大模型全链路开源开放体系总结 一、引言 书生・浦语大模型全链路开源开放体系的出现&#xff0c;为人工智能领域的发展带来了新的活力和机遇。它涵盖了从模型研发到应用部署的全流程&#xff0c;旨在促进技术的共享与创新&#xff0c;推动人工智能技术在各个领域的广…
阅读更多...
C++关于链表基础知识

C++关于链表基础知识

单链表 // 结点的定义 template <class T> struct Node { T data ; Node <T> *next; //指向下一个node 的类型与本node相同 } // 最后一个node指针指向Null 生成结点&#xff1a; Node <T> * p new Node < T>; 为结点赋值: p-> data …
阅读更多...
【微服务】服务注册与发现 - Eureka（day3）

【微服务】服务注册与发现 - Eureka（day3）

CAP理论 P是分区容错性。简单来说&#xff0c;分区容错性表示分布式服务中一个节点挂掉了&#xff0c;并不影响其他节点对外提供服务。也就是一台服务器出错了&#xff0c;仍然可以对外进行响应&#xff0c;不会因为某一台服务器出错而导致所有的请求都无法响应。综上所述&…
阅读更多...
LabVIEW机床加工监控系统

LabVIEW机床加工监控系统

随着制造业的快速发展&#xff0c;机床加工的效率与稳定性成为企业核心竞争力的关键。传统的机床监控方式存在效率低、无法远程监控的问题。为了解决这些问题&#xff0c;开发了一种基于LabVIEW的机床加工监控系统&#xff0c;通过实时监控机床状态&#xff0c;改进生产流程&am…
阅读更多...
双指针——删除有序数组中的重复项

双指针——删除有序数组中的重复项

题目描述 给你一个有序数组 nums &#xff0c;请你原地删除重复出现的元素&#xff0c;使每个元素只出现一次 &#xff0c;返回删除后数组的新长度。 不要使用额外的数组空间&#xff0c;你必须在原地修改输入数组 并在使用 O(1) 额外空间的条件下完成。 输入格式 一共两行。…
阅读更多...
2024年华为OD机试真题-敏感字段加密-Python-OD统一考试（E卷）

2024年华为OD机试真题-敏感字段加密-Python-OD统一考试（E卷）

最新华为OD机试考点合集：华为OD机试2024年真题题库（E卷+D卷+C卷）_华为od机试题库-CSDN博客 每一题都含有详细的解题思路和代码注释，精选c++、JAVA、Python三种语言解法。帮助每一位考生轻松、高效刷题。订阅后永久可看，发现新题及时跟新。 题目描述 给定一个由多个…
阅读更多...
Rockchip RK3588 - Rockchip Linux Recovery recovery源码分析

Rockchip RK3588 - Rockchip Linux Recovery recovery源码分析

---------------------------------------------------------------------------------------------------------------------------- 开发板 &#xff1a;NanoPC-T4开发板eMMC &#xff1a;16GBLPDDR3 &#xff1a;4GB 显示屏 &#xff1a;15.6英寸HDMI接口显示屏uboot &#…
阅读更多...
【Ubuntu】Ubuntu常用命令

【Ubuntu】Ubuntu常用命令

文章目录 网卡路由常用命令&#xff1a;编辑文件echo 权限设置gcc编译器&#xff1a; 重启网络服务 sudo service network-manager restart 网卡 #查看网卡信息 ip a #区分光网卡电网卡 sudo lshw -class network -businfo ifconfig ifconfig eth1 192.168.1.12/24 #重启网卡…
阅读更多...
PhotoMaker部署文档

PhotoMaker部署文档

一、介绍 PhotoMaker&#xff1a;一种高效的、个性化的文本转图像生成方法&#xff0c;能通过堆叠 ID 嵌入自定义逼真的人类照片。相当于把一张人的照片特征提取出来&#xff0c;然后可以生成你想要的不同风格照片&#xff0c;如写真等等。 主要特点&#xff1a; 在几秒钟内…
阅读更多...
最新文章

Copyright @ 2022~2023