当前位置： 首页 > news >正文

AJAX——常用请求方法

news 2026/4/2 0:53:01

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>

相关文章：

AJAX——常用请求方法

1 请求方法 请求方法&#xff1a;对服务器资源&#xff0c;要执行的操作 2 数据提交 场景&#xff1a;当数据需要在服务器上保存 3 axios请求配置 url&#xff1a;请求的URL网址 method&#xff1a;请求的方法&#xff0c;GET可以省略&#xff08;不区分大小写&#xff09; …...

编程日记 2024/2/15 18:06:02

sqlserver2012 解决日志大的问题

当SQL Server 2012的事务日志变得过大时&#xff0c;这通常意味着日志备份没有被定期执行&#xff0c;或者日志文件的自动增长设置被设置得太高&#xff0c;导致它不断增长以容纳所有未备份的事务。解决日志大的问题通常涉及以下几个步骤&#xff1a; 备份事务日志&#xff1a;…...

编程日记 2024/2/15 18:00:58

Vue3快速上手（三）Composition组合式API及setup用法

一、Vue2的API风格 Vue2的API风格是Options API,也叫配置式API。一个功能的数据&#xff0c;交互&#xff0c;计算&#xff0c;监听等都是分别配置在data, methods&#xff0c;computed, watch等模块里的。如下&#xff1a; <template><div class"person"…...

编程日记 2024/2/15 17:59:57

【C++】内存五大区详解

&#x1f490; &#x1f338; &#x1f337; &#x1f340; &#x1f339; &#x1f33b; &#x1f33a; &#x1f341; &#x1f343; &#x1f342; &#x1f33f; &#x1f344;&#x1f35d; &#x1f35b; &#x1f364; &#x1f4c3;个人主页 &#xff1a;阿然成长日记 …...

编程日记 2024/2/15 17:47:44

Django学习笔记教程全解析:初步学习Django模型，初识API,以及Django的后台管理系统（Django全解析，保姆级教程）

把时间用在思考上是最能节省时间的事情。——[美]卡曾斯 导言 写在前面 本文部分内容引用的是Django官方文档&#xff0c;对官方文档进行了解读和理解&#xff0c;对官方文档的部分注释内容进行了翻译&#xff0c;以方便大家的阅读和理解。 概述 在上一篇文章里&#xff0…...

编程日记 2024/2/15 17:44:41

Python学习之路-爬虫提高:selenium

Python学习之路-爬虫提高:selenium 什么是selenium Selenium是一个Web的自动化测试工具&#xff0c;最初是为网站自动化测试而开发的&#xff0c;Selenium 可以直接运行在浏览器上&#xff0c;它支持所有主流的浏览器&#xff08;包括PhantomJS这些无界面的浏览器&#xff09…...

编程日记 2024/2/15 17:39:33

Rust基础拾遗--进阶

Rust基础拾遗 前言1.结构体1.1 具名字段型结构体1.2 元组型结构体1.3 单元型结构体1.4 结构体布局1.5 用impl定义方法1.5.1 以Box、Rc或Arc形式传入self1.5.2 类型关联函数 1.6 关联常量1.7 泛型结构体1.8 带生命周期参数的泛型结构体1.9 带常量参数的泛型结构体1.10 让结构体类…...

编程日记 2024/2/15 17:38:33

数据同步工具对比——SeaTunnel 、DataX、Sqoop、Flume、Flink CDC

在大数据时代&#xff0c;数据的采集、处理和分析变得尤为重要。业界出现了多种工具来帮助开发者和企业高效地处理数据流和数据集。本文将对比五种流行的数据处理工具&#xff1a;SeaTunnel、DataX、Sqoop、Flume和Flink CDC&#xff0c;从它们的设计理念、使用场景、优缺点等方…...

编程日记 2024/2/15 17:33:26

随机过程及应用学习笔记（四） 马尔可夫过程

马尔可夫过程是理论上和实际应用中都十分重要的一类随机过程。 目录 前言 一、马尔可夫过程的概念 二、离散参数马氏链 1 定义 2 齐次马尔可夫链 3 齐次马尔可夫链的性质 三、齐次马尔可夫链状态的分类 四、有限马尔可夫链 五、状态的周期性 六、极限定理 七、生灭过…...

编程日记 2024/2/15 17:31:24

prometheus

文章目录 一、Prometheus简介什么是Prometheus&#xff1f;Prometheus的优势Prometheus的组件、架构Prometheus适用于什么场景Prometheus不适合什么场景 二、相关概念数据模型指标名称和标签样本表示方式 指标类型Counter计数器Gauge仪表盘Histogram直方图Summary摘要 Jobs和In…...

编程日记 2024/2/15 17:21:11

Vi 和 Vim 编辑器

Vi 和 Vim 编辑器 vi 和 vim 的基本介绍 Linux 系统会内置 vi 文本编辑器 Vim 具有程序编辑的能力&#xff0c;可以看做是 Vi 的增强版本&#xff0c;可以主动的以字体颜色辨别语法的正确性&#xff0c;方便程序设计。 代码补完、编译及错误跳转等方便编程的功能特别丰富&…...

编程日记 2024/2/15 17:19:07

算法沉淀——队列+宽度优先搜索（BFS）（leetcode真题剖析）

算法沉淀——队列宽度优先搜索&#xff08;BFS&#xff09; 01.N 叉树的层序遍历02.二叉树的锯齿形层序遍历03.二叉树最大宽度04.在每个树行中找最大值 队列 宽度优先搜索算法&#xff08;Queue BFS&#xff09;是一种常用于图的遍历的算法&#xff0c;特别适用于求解最短路径…...

编程日记 2024/2/15 17:13:02

编辑器的新选择（基本不用配置）

Cline 不用看网上那些教程Cline几乎不用配置。 点击设置直接选择Chinese, C直接在选择就行了。 Cline是一个很好的编辑器&#xff0c;有很多懒人必备的功能。 Lightly 这是一个根本不用配置的C编辑器。 旁边有目录&#xff0c;而且配色也很好&#xff0c;语言标准可以自己…...

编程日记 2024/2/15 17:12:01

算法沉淀——栈（leetcode真题剖析）

算法沉淀——栈 01.删除字符串中的所有相邻重复项02.比较含退格的字符串03.基本计算器 II04.字符串解码05.验证栈序列 栈&#xff08;Stack&#xff09;是一种基于先进后出&#xff08;Last In, First Out&#xff0c;LIFO&#xff09;原则的数据结构。栈具有两个主要的操作&am…...

编程日记 2024/2/15 17:09:59

耳机壳UV树脂制作私模定制耳塞需要注意什么问题？

制作私模定制耳塞需要注意以下问题&#xff1a; 耳模制作&#xff1a;获取准确的耳模是制作私模定制耳塞的关键步骤。需要使用合适的材料和方法&#xff0c;确保耳模的准确性和稳定性。材料选择&#xff1a;选择合适的UV树脂和其它相关材料&#xff0c;确保它们的质量和性能符…...

编程日记 2024/2/15 17:05:54

easyx搭建项目-永七大作战（割草游戏）

永七大作战 游戏介绍&#xff1a; 永七大作战 游戏代码链接&#xff1a;永七大作战 提取码&#xff1a;ABCD 不想水文了&#xff0c;直接献出源码&#xff0c;表示我的诚意...

编程日记 2024/2/15 17:04:52

nginx命名location跳转的模块上下文继承

目录 1. 缘起2. 解决方案2.1 保留指定模块的上下文信息2.2 获取指定模块的上下文信息2.3 设置指定模块的上下文信息2.4 设置模块上下文是否需要继承标记2.5 对openrety lua代码的支持 1. 缘起 nginx提供了非常棒的功能&#xff0c;命名location&#xff0c;如文章nginx的locati…...

编程日记 2024/2/15 16:55:43

洛谷 P2678 [NOIP2015 提高组] 跳石头 (Java)

洛谷 P2678 [NOIP2015 提高组] 跳石头 (Java) 传送门&#xff1a;P2678 [NOIP2015 提高组] 跳石头 题目&#xff1a; [NOIP2015 提高组] 跳石头 题目背景 NOIP2015 Day2T1 题目描述 一年一度的“跳石头”比赛又要开始了&#xff01; 这项比赛将在一条笔直的河道中进行&…...

编程日记 2024/2/15 16:50:39

第2讲投票系统后端架构搭建

创建项目时&#xff0c;随机选择一个&#xff0c;后面会生成配置properties文件 生成文件 maven-3.3.3 设置阿里云镜像 <?xml version"1.0" encoding"UTF-8"?><!-- Licensed to the Apache Software Foundation (ASF) under one or more cont…...

编程日记 2024/2/15 16:48:37

Flask 入门7：使用 Flask-Moment 本地化日期和时间

如果Web应用的用户来自世界各地&#xff0c;那么处理日期和时间可不是一个简单的任务。服务器需要统一时间单位&#xff0c;这和用户所在的地理位置无关&#xff0c;所以一般使用协调世界时&#xff08;UTC&#xff09;。不过用户看到 UTC 格式的时间会感到困惑&#xff0c;他们…...

编程日记 2024/2/15 16:47:35

探索偏心轮飞剪的 Codesys 程序奥秘：基于偏心轮加滑块机构

偏心轮 飞剪 电子凸轮 codesys程序源码 适用于偏心轮加滑块机构 在自动化控制领域&#xff0c;偏心轮飞剪系统凭借其独特的运动特性和高效的切割能力&#xff0c;在众多生产场景中发挥着关键作用。今天咱们就深入探讨基于偏心轮加滑块机构的偏心轮飞剪的 Codesys 程序源码&…...

编程新知 2026/4/2 0:24:55

嵌入式C++轻量级生命体基类：面向OOP的零开销实体抽象

1. 项目概述life_entity是一个面向嵌入式系统与游戏逻辑建模场景设计的轻量级 C 基类&#xff0c;其核心定位并非通用游戏引擎组件&#xff0c;而是为资源受限环境&#xff08;如 Cortex-M3/M4 微控制器运行 FreeRTOS 或裸机实时调度器&#xff09;中实现可继承、可多态、可生命…...

编程新知 2026/4/2 0:22:55

Ostrakon-VL终端效果展示：深夜食堂风格终端打印输出全过程录屏

Ostrakon-VL终端效果展示&#xff1a;深夜食堂风格终端打印输出全过程录屏 1. 像素特工终端概览 在零售与餐饮行业的数字化转型浪潮中&#xff0c;我们开发了这款基于Ostrakon-VL-8B多模态大模型的Web交互终端。与传统工业级UI不同&#xff0c;我们采用了高饱和度的像素艺术风…...

编程新知 2026/4/1 22:21:19

Ubuntu 22.04上，用Cephadm 17.2.0搭建单节点Ceph集群的保姆级避坑指南

Ubuntu 22.04单节点Ceph集群实战&#xff1a;从零到生产级部署的17个关键细节 当你在Ubuntu 22.04上尝试用Cephadm搭建单节点Ceph集群时&#xff0c;是否遇到过这些场景&#xff1a;bootstrap卡在某个步骤超过半小时、OSD设备明明存在却显示"no available devices"、…...

编程新知 2026/4/1 19:29:10

Windows环境下ODBC连接MySQL保姆级教程（含性能优化配置）

Windows环境下ODBC连接MySQL全流程实战指南 1. 环境准备与驱动安装 在Windows平台使用ODBC连接MySQL数据库&#xff0c;首先需要确保开发环境配置正确。与JDBC不同&#xff0c;ODBC作为跨语言的数据库连接标准&#xff0c;其驱动安装过程需要特别注意版本兼容性问题。以下是环境…...

编程新知 2026/4/1 19:13:04

FinalShell v4.5.12 安装避坑指南：为什么你的远程连接总是失败？

FinalShell 4.5.12 高效配置手册&#xff1a;从安装到稳定连接的进阶实践 远程终端工具的选择往往决定了运维效率的天花板。作为一款集SSH连接、文件传输、性能监控于一体的全能型工具&#xff0c;FinalShell近年来在开发者社区中积累了不错的口碑。但不少用户在初次接触时&…...

编程新知 2026/4/1 18:34:20

霜儿-汉服-造相Z-Turbo作品集：看看AI能生成多美的汉服少女图

霜儿-汉服-造相Z-Turbo作品集&#xff1a;看看AI能生成多美的汉服少女图 1. 惊艳开篇&#xff1a;AI汉服艺术的魅力 当传统汉服遇上现代AI技术&#xff0c;会碰撞出怎样的火花&#xff1f;霜儿-汉服-造相Z-Turbo给出了令人惊叹的答案。这个基于Xinference部署的文生图模型服务…...

编程新知 2026/4/1 17:29:04

Mermaid Live Editor：5分钟快速创建专业图表的终极免费工具

Mermaid Live Editor&#xff1a;5分钟快速创建专业图表的终极免费工具 【免费下载链接】mermaid-live-editor Edit, preview and share mermaid charts/diagrams. New implementation of the live editor. 项目地址: https://gitcode.com/GitHub_Trending/me/mermaid-live-e…...

编程新知 2026/4/1 17:18:31

Honey Select 2终极增强补丁：3分钟快速配置完整模组生态

Honey Select 2终极增强补丁&#xff1a;3分钟快速配置完整模组生态 【免费下载链接】HS2-HF_Patch Automatically translate, uncensor and update HoneySelect2! 项目地址: https://gitcode.com/gh_mirrors/hs/HS2-HF_Patch 你是否曾为《Honey Select 2》的模组安装繁…...

编程新知 2026/4/1 17:07:46

Deep-Live-Cam架构深度解析：构建实时AI换脸系统的技术实现与优化策略

Deep-Live-Cam架构深度解析&#xff1a;构建实时AI换脸系统的技术实现与优化策略 【免费下载链接】Deep-Live-Cam real time face swap and one-click video deepfake with only a single image 项目地址: https://gitcode.com/GitHub_Trending/de/Deep-Live-Cam 在数字…...

编程新知 2026/4/1 16:28:46