Ajax处理错误信息(处理响应报文)

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>

		<form action="">
			<div>用户名<input type="text" class="username"></div>
			<div>密码<input type="text" class="password"></div>
		</form>
		<button>注册</button>

		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<script>
			let btn = document.querySelector("button")
			btn.onclick = function() {
				// 获取表单输入框中的数据,以便提交给后端
				let username = document.querySelector(".username").value
				let password = document.querySelector(".password").value

				axios({
						// 提交和请求数据的url
						url: 'http://hmajax.itheima.net/api/register',
						// get 		获取数据
						// post 	提交数据
						// put 		修改数据(全部)
						// delete 	删除数据
						// patch 	修改数据(部分)
						method: 'post',
						// 提交数据
						data: {
							username: username,
							password: password
						}
					}
					// 后端返回的结果
				).then(result => {
					console.log(result.data.message)
				}).catch(error => { //抓取异常信息
					// 控制台打印响应回的信息
					console.log(error)
					//响应回的数据的具体错误信息存在的位置
					console.log(error.response.data.message)
					alert(error.response.data.message)
				})

			}
		</script>
	</body>
</html>
相关推荐
鬼手点金1 小时前
nanoGPT/nanochat 能做出 DeepSeek/Qwen 这样的大模型吗?
服务器·前端·javascript·bug·openclaw
软件技术NINI1 小时前
美妆商城html+Css+js 4页
javascript·css·html
蛋蛋的就会顺顺的1 小时前
hot100 p0——栈,贪心算法,动态规划
java·前端·javascript·算法·leetcode·力扣
程序员Sunday2 小时前
TypeScript 的 any、unknown、never 有什么区别?
前端·面试·typescript
朱涛的自习室2 小时前
70 美金的 Beyond Compare,我让 Gemini 4 和 DeepSeek 造个开源免费版(Day 2)
android·前端·人工智能
码艺-Alimjan2 小时前
Tauri 源码备份 · 打包 & 解压 总结,源码收集之路
前端·javascript·vue.js
小马不起床2 小时前
零基础玩转 FastAPI_11:前端后台管理页面
前端·状态模式·fastapi
子非鱼a4 小时前
【文件上传】一个普普通通的edu16
前端
美狐美颜SDK开放平台4 小时前
直播APP如何实现美白滤镜功能?视频美颜SDK技术开发方案详解
前端·数据库·人工智能·音视频·美颜sdk·直播美颜sdk·视频美颜sdk
pride.li5 小时前
第03章 Python 教程-基础语法:注释与变量
服务器·前端·后端·python·算法·计算机视觉