AJAX——常用请求方法

1 请求方法

请求方法:对服务器资源,要执行的操作

 2 数据提交

场景:当数据需要在服务器上保存

3 axios请求配置

url:请求的URL网址

method:请求的方法,GET可以省略(不区分大小写)

data:提交数据

4 数据提交-注册账号

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

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

请求方法:POST

参数名:

username用户名(中英文和数字组成,最少8位)

password密码(最少6位)

<!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>
</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提交用户和密码,完成注册*/document.querySelector('.btn').addEventListener('click', () => {axios({url: 'http://hmajax.itheima.net/api/register',// 指定请求方法method: 'post',//提交数据data: {username: 'itheima00333',password: '7654321'}}).then(result => {console.log(result)})})</script></body></html>

注意:报错的基本都是账户被占用了,换个用户名就不会报错了 

 5 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: 'itheima007',password: '7654321'}}).then(result => {// 成功console.log(result)}).catch(error => {// 失败// 处理错误信息console.log(error)console.log(error.response.data.message)alert(error.response.data.message)})})</script>
</body></html>

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

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

相关文章

【数据结构】13:表达式转换(中缀表达式转成后缀表达式)

思想&#xff1a; 从头到尾依次读取中缀表达式里的每个对象&#xff0c;对不同对象按照不同的情况处理。 如果遇到空格&#xff0c;跳过如果遇到运算数字&#xff0c;直接输出如果遇到左括号&#xff0c;压栈如果遇到右括号&#xff0c;表示括号里的中缀表达式已经扫描完毕&a…

协议-TCP协议-基础概念04-可能发生丢包的位置-linux配置项梳理(TCP连接的建立和断开、收发包过程)

可能发生丢包的位置-linux配置项梳理&#xff08;TCP连接的建立和断开、收发包过程&#xff09;-SYN Flood攻击和防御原理 参考来源&#xff1a; 极客时间-Linux性能优化实战 极客时间-Linux内核技术实战课 到底是哪里发生了丢包呢&#xff1f; Linux 的网络收发流程 从图中…

CentOS7下如何安装Nginx

一、Ngxin是什么 Nginx是一个开源的 Web 服务器&#xff0c;具有反向代理、负载均衡、缓存等功能。它可以作为 HTTP 服务器&#xff0c;将服务器上的静态文件&#xff08;如 HTML、图片&#xff09;通过 HTTP 协议展现给客户端&#xff0c;也可以实现动静分离&#xff0c;把动态…

PgSQL内核特性 - push-based pipeline 执行引擎

PgSQL内核特性 - push-based pipeline 执行引擎 数据库的SQL执行引擎负责处理和执行SQL请求。通常情况下&#xff0c;查询优化器会输出物理执行计划&#xff0c;一般由一系列的算子组成。当前&#xff0c;有两种算子流水线构建方式&#xff1a;1&#xff09;需求驱动的流水线&a…

【大厂AI课学习笔记】【1.6 人工智能基础知识】(4)深度学习和机器学习

关于深度学习和机器学习&#xff0c;出来包含关系之外&#xff0c;还有如上总结的知识点。 分别从特征处理、学习方法、数据依赖、硬件依赖等4个方面&#xff0c;进行了总结。 从特征处理上看&#xff1a;深度学习从数据中习得高级特征&#xff0c;并自行创建新的特征。这比普…

python入门篇11-面向对象的基础使用

全文目录,一步到位 1.前言简介1.1 专栏传送门1.1.1 上文小总结1.1.2 上文传送门 2. python基础使用2.1 面向对象的基础使用2.1.1 创建类2.1.2 使用对象(定义成员变量)2.1.3 成员方法的定义与使用2.1.4 构造方法的使用2.1.5 常用魔术方法 2.2 面向对象思想核心2.2.1 面向对象_私…

立体视觉几何 (三)

立体视觉系统概述 误差分析 考虑对应于深度 Z 的视差 d 的匹配对。我们想要评估 ΔZ&#xff0c;即视差误差引起的深度误差。将 Z 对 d 求导&#xff0c;得到&#xff1a; 立体视觉中基线&#xff08;baseline&#xff09;、焦距&#xff08;focal length&#xff09;和立体重…

游泳时可以听歌的耳机有哪些?戴游泳耳机有哪些好处?

游泳和跑步在某种程度上相似&#xff0c;特别是在短距离冲刺时&#xff0c;大脑似乎变得空白&#xff0c;而在中长距离的有氧运动中&#xff0c;身体感到疲劳&#xff0c;但大脑却异常清晰&#xff0c;时间却显得格外漫长。如何打发时间&#xff0c;让游泳锻炼变得不无聊&#…

中国电子学会2020年12月份青少年软件编程Scratch图形化等级考试试卷三级真题(编程题)

编程题(共3题&#xff0c;共30分) 36.绘制图形 1. 准备工作: &#xff08;1&#xff09;保留默认小猫角色&#xff0c;隐藏角色&#xff1b; &#xff08;2&#xff09;背景为白色背景。 2. 功能实现: &#xff08;1&#xff09;绘制如下图所示的图案&#xff1b; &…

点云标注工具

目录 3d手势识别 c 3d关键点&#xff0c;Bounding Box Labels Rectangle Labels KITTI 3D Ground Truth Annotator c标注工具 3d手势识别 GitHub - 99xtaewoo/Automated-Hand-3D-pose-annotation-Tool: Automated Hand 3D pose annotation Tool c 3d关键点&#xff0c;Bou…

【办公类-23-02】20240212徐迟《江南小镇(南浔古镇)》“水晶晶”和景物”数量提取66个

作品展示 背景需求&#xff1a; 2024年春节前夕&#xff0c;我与家人前往浙江湖州、南浔旅行。探寻母亲、外婆外公、曾外婆的祖籍南浔的风土人情。在古镇上看到了”著名诗人“徐迟”的介绍。 母亲说&#xff1a;我的姑母就是在南浔读了小学和中学&#xff0c;她小学时的老师就…

机器学习系列——(十三)多项式回归

引言 在机器学习领域&#xff0c;线性回归是一种常见且简单的模型。然而&#xff0c;在某些情况下&#xff0c;变量之间的关系并不是线性的&#xff0c;这时候我们就需要使用多项式回归来建模非线性关系。多项式回归通过引入高次项来扩展线性回归模型&#xff0c;从而更好地拟…

Github 2024-02-12 开源项目日报 Top10

根据Github Trendings的统计&#xff0c;今日(2024-02-12统计)共有10个项目上榜。根据开发语言中项目的数量&#xff0c;汇总情况如下&#xff1a; 开发语言项目数量Rust项目3Python项目3JavaScript项目1TypeScript项目1C项目1C项目1PowerShell项目1非开发语言项目1 SubQuery…

Elasticsearch:使用查询规则(query rules)进行搜索

在之前的文章 “Elasticsearch 8.10 中引入查询规则 - query rules”&#xff0c;我们详述了如何使用 query rules 来进行搜索。这个交互式笔记本将向你介绍如何使用官方 Elasticsearch Python 客户端来使用查询规则。 你将使用 query rules API 将查询规则存储在 Elasticsearc…

docker之centos7容器常用命令和服务安装

一、前言 以前我们如果想在windows环境下使用linux系统&#xff0c;最早的是一台主机上安装双机系统&#xff0c;再后来我们有了VMware&#xff0c;可以通过workstations虚拟化平台安装虚拟机。现在我们还可以通过docker安装linux容器&#xff0c;容器更轻量也更便捷。不过凡事…

工业级加固平板丨亿道三防平板电脑丨安卓工业平板丨改善车队管理

在现代物流和运输行业中&#xff0c;车队管理是一个复杂而重要的任务。为了更好地管理车队&#xff0c;提高工作效率和减少成本&#xff0c;许多企业正在采用新技术和工具。其中&#xff0c;三防平板电脑作为一种功能强大且适应恶劣环境的设备&#xff0c;已经在车队管理中得到…

C++联合体详解!

个人主页&#xff1a;PingdiGuo_guo 收录专栏&#xff1a;C干货专栏 大家伙新年快乐&#xff0c;今天我们来了解一下C联合体。 文章目录 1.联合体 1.1联合体的概念 1.2联合体的思想 1.3联合体的作用 1.3.1内存优化 1.3.2二进制数据操作 1.3.3类型转换 1.3.4解决特定问…

交叉熵损失函数基本概念及公式

Cross-Entropy Loss 1.二分类2. 对于多类别分类问题&#xff0c;其公式可以表示为&#xff1a;3. 公式深度挖掘解释——交叉熵损失函数公式中&#xff08;log&#xff09;的解释总结 交叉熵损失函数&#xff08;Cross-Entropy Loss&#xff09;是在机器学习和深度学习中常用的一…

Ainx-V0.2-简单的连接封装与业务绑定

&#x1f4d5;作者简介&#xff1a; 过去日记&#xff0c;致力于Java、GoLang,Rust等多种编程语言&#xff0c;热爱技术&#xff0c;喜欢游戏的博主。 &#x1f4d7;本文收录于Ainx系列&#xff0c;大家有兴趣的可以看一看 &#x1f4d8;相关专栏Rust初阶教程、go语言基础系列…

【EAI 020】Diffusion Policy: Visuomotor Policy Learning via Action Diffusion

论文标题&#xff1a;Diffusion Policy: Visuomotor Policy Learning via Action Diffusion 论文作者&#xff1a;Cheng Chi, Siyuan Feng, Yilun Du, Zhenjia Xu, Eric Cousineau, Benjamin Burchfiel, Shuran Song 作者单位&#xff1a;Columbia University, Toyota Research…