【ajax基础03】常用ajax请求方法和数据提交以及axios错误处理

news2024/10/6 8:40:28

一:请求方法

什么是请求方法:

浏览器服务器资源,要执行的操作

常见请求方法如下

二:axios中应用

语法格式:

method:为请求方法,默认情况下为get(获取数据)

data:提交数据,参数名为后端程序员规定,值为前端通过技术获取

axios({
    url:'目标资源地址',
    method:'请求方法'
    data:{
    参数名:值    
    }
}).then((result)=>{
    //对服务器返回的数据做后续处理
})

案例:

需求点击按钮,提交用户名和密码,查看返回值信息

说明:案例中获取以及提交数据使用的服务器itheima的,同时相应的接口文档如下注册账号 - AJAX阶段 (apifox.com)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button class="btn">注册</button>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        const btn = document.querySelector('.btn')
        btn.addEventListener('click', function () {
            axios({
                url: 'https://hmajax.itheima.net/api/register',
                method: 'post',
                data: {
                    username: 'itheima0011',
                    password: '1234567'
                }
            }).then(reslut => {
                console.log(reslut);
            })
        })


    </script>
</body>

</html>

axios错误处理

在当前注册案例中,如果重复注册会出现报错信息。可以利用catch()方法获取axios报错信息,进而返回给用户

            axios({
                url: 'https://hmajax.itheima.net/api/register',
                method: 'post',
                data: {
                    username: 'itheima0011',
                    password: '1234567'
                }
            }).then(reslut => {
                console.log(reslut);
            }).catch(error => {
                // console.log(error);
                alert(error.response.data.message)
            })

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

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

相关文章

Nginx Proxy 代理测试

目录 https://blog.csdn.net/Lzcsfg/article/details/139781909 一. 实验准备 二. 配置反向代理 三. 配置二层代理 解释流程 一. 实验准备 关闭防火墙和selinux&#xff0c;准备三台同一网段的虚拟机 localhostRoucky_linux9.4192.168.226.20localhostRoucky_linux9.419…

STM32单片机-BKP和RTC

STM32单片机-BKP和RTC 一、Unix时间戳1.1 时间戳转换 二、BKP(备份寄存器)三、RTC(实时时钟)3.1 RTC工作原理 四、代码部分4.1 BKP备份寄存器4.2 RTC实时时钟 一、Unix时间戳 Unix时间戳定义为从伦敦时间的1970年1月1日0时0分0秒开始所经过的秒数&#xff0c;不考虑闰秒时间戳…

RoboDK试用期间提示无效或过期的许可证

问题描述 RoboDK下载下来在试用期间提示如下信息&#xff0c;不知道什么原因 临时解决方法 将C:\Users\${username}\AppData\Roaming\RoboDK该目录下的文件全部删除掉&#xff0c;便可以正常使用RoboDK应用了&#xff0c;但是等软件关闭后还是会出现上面的问题&#xff0c;…

【anaconda】本地永久设置镜像源

【anaconda】本地永久设置镜像源 可以通过命令行设置全局的 pip 配置&#xff1a; pip config set global.index-url https://pypi.tuna.tsinghua.edu.cn/simple

Windows系统下制作Windows 11系统U盘启动及安装指导

Windows系统下制作Windows 11系统U盘启动及安装指导 一、准备工作 U盘不得小于8G(推荐使用usb3.0接口)&#xff1b;下载好对应的系统镜像&#xff1b;下载RUFUS或者软通碟U盘制作启动软件&#xff1b; 二、Windows操作系统下制作U盘启动&#xff08;这里以使用RUFUS软件为例&…

【ARMv8/ARMv9 硬件加速系列 4 -- 加解密 Cryptographic Extension 介绍】

文章目录 ARMv8.0 Cryptographic ExtensionFEAT_AESFEAT_PMULLFEAT_SHA1FEAT_SHA256ARMv8.2 扩展FEAT_SHA512FEAT_SHA3FEAT_SM3FEAT_SM4ARMv8.0 Cryptographic Extension ARMv8.0引入了加密扩展(Cryptographic Extension),旨在加速加密和解密操作。这一扩展通过新增专用指令…

BarTender软件最新版下载-bartender条码标签打印软件下载

​​BarTender​​是一款遵循“look and feel”标准的​​条码打印​​软件。​​BarTender​​条码打印软件能够帮助用户挥洒自如&#xff0c;轻松制作出标签条码&#xff0c;包括文本、图形、​​条形码​​和大多数序列化功能。BarTender条码打印软件功能强大、操作简单&…

排序模型的奥秘:如何用AI大模型提升电商、广告和用户增长的效果

摘要 排序模型是数字化营销中最重要的工具之一&#xff0c;它可以帮助我们在海量的信息中筛选出最符合用户需求和偏好的内容&#xff0c;从而提高用户的满意度和转化率。本文从产品经理的视角&#xff0c;介绍了常见的排序模型的原理和应用&#xff0c;包括基于规则的排序、基…

2024.6.18

Python的网络编程 网络四层 在开始前,我们需要先了解一下我们在网络通信过程中的四个层次 我们上网产生的数据都是经过协议栈一层一层的封装然后经网卡发送到网络&#xff0c;经网络发送到服务端&#xff0c;然后服务端又是一层一层的解封装拿到自己想要的数据。 我们学习的…

【Linux】自定义shell(命令行解释器)

原理&#xff1a; shell是命令行解释器&#xff0c;当有命令需要执行时&#xff0c;shell创建子进程&#xff0c;让子进程执行命令&#xff0c;而shell只需等待子进程退出即可。 其中我们使用了下面这几个函数&#xff1a; 获取命令行&#xff08;fgets函数&#xff09;。解析…

MAX30102驱动

文章目录 一、引言二、MAX30102传感器概述2.1 模块原理血氧饱和度&#xff08;SpO2&#xff09;测量原理心率测量原理 2.2 模块工作流程 三、硬件连接四、驱动程序4.1 FIFO介绍4.2 max30102寄存器配置 五、数据采集与处理六、示例项目七、故障排除八、结论九、附录 一、引言 本…

虚拟货币投资指南|XEX交易所

什么是虚拟货币&#xff1f; 虚拟货币是一种基于区块链技术的数字资产&#xff0c;具有去中心化、透明性和安全性等特点。比特币&#xff08;BTC&#xff09;、以太坊&#xff08;ETH&#xff09;和莱特币&#xff08;LTC&#xff09;等是目前较为知名的虚拟货币。 虚拟货币投…

降压开关稳压器如何使用串联晶体管

降压开关稳压器是一种开关模式电源电路&#xff0c;旨在有效地将直流电压从较高电压降低到较低电压&#xff0c;即减去或“降压”电源电压&#xff0c;从而降低输出端可用的电压端子无需改变极性。换句话说&#xff0c;降压开关调节器是降压调节器电路&#xff0c;因此例如降压…

生成对抗网络——GAN深度卷积实现(代码+理解)

本篇博客为 上篇博客的 另一个实现版本&#xff0c;训练流程相同&#xff0c;所以只实现代码&#xff0c;感兴趣可以跳转看一下。 生成对抗网络—GAN&#xff08;代码理解&#xff09; http://t.csdnimg.cn/HDfLOhttp://t.csdnimg.cn/HDfLO 目录 一、GAN深度卷积实现 1. 模型…

苍穹外卖---导入接口文档

一、前后端分离开发流程 第一步&#xff1a;定义接口&#xff0c;确定接口的路径、请求方式、传入参数、返回参数。 第二步&#xff1a;前端开发人员和后端开发人员并行开发&#xff0c;同时&#xff0c;也可自测。 第三步&#xff1a;前后端人员进行连调测试。 第四步&…

搭建zookeeper、Kafka集群

搭建zookeeper、Kafka集群 1、绘制kafka的存储结构、副本机制2、搭建zookeeper集群3、搭建kafka集群4、使用kafka创建名为自己姓名汉语拼音的topic5、查看topic的分区和副本策略 1、绘制kafka的存储结构、副本机制 2、搭建zookeeper集群 实验环境准备&#xff1a; 3台服务器&…

界面追踪方法Level Set与VOF在气泡流动模拟的效果比较

对于两相流模拟&#xff0c;模型主要分为两大类&#xff1a;高相分数模型和界面捕捉类模型。当我们关注水中的含气量&#xff08;气泡界面及气泡形状可忽略&#xff09;&#xff0c;则采用高相分数模型&#xff0c;此模型适用于气泡特别多的流动问题。对于有明确边界的流体&…

AI安全水深流急,黄铁军首谈AGI能力与风险分级,2024智源大会圆满落幕

2024年6月15日&#xff0c;为期 2 天的北京智源大会圆满落下帷幕。本次大会围绕大语言模型、多模态模型、Agent、具身智能、数据新基建、AI系统、AI开源、AI for Science、AI安全等人工智能热门技术方向和焦点议题&#xff0c;召开了20平行论坛&#xff0c;共计百场报告。 过去…

Linux top 命令使用教程

转载请标明出处&#xff1a;https://blog.csdn.net/donkor_/article/details/139775547 文章目录 一、top 是什么二、top的基础语法三、top输出信息解读 一、top 是什么 Linux top 是一个在Linux和其他类 Unix 系统上常用的实时系统监控工具。它提供了一个动态的、交互式的实时…

基于JSP的房屋租赁系统

开头语&#xff1a; 你好&#xff0c;我是专注于计算机科学与技术研究的学长。如果你对房屋租赁系统感兴趣或有相关开发需求&#xff0c;欢迎联系我。 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;JSPJavaBeansServlet 工具&#xff1a;MyEclipse、…