2024-1-25常见请求方法和数据提交

目录

常见请求方法和数据提交

常见请求方法

什么是请求方法

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

请求方法 操作
GET 获取数据
POST 提交数据
PUT 修改数据（全部）
DELETE 删除数据
PATCH 修改数据（部分）

axios请求配置

url：请求的URL网址

method：请求的方法，GET可以省略（不区分大小写）

data：提交数据

基本格式如下

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

这里提供一个案例来学习

数据提交 - 注册账号

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

注册用户URL地址：

http://hmajax.itheima.net/api/register

请求方法：POST

参数名：

username：用户名（中英文和数字组成，最少8位）

password：密码（最少6位）

格式例子如下

axios({
	url:'http://hmajax.itheima.net/api/register'
	method:'post'//请求方法
	data:{
		username:'zjb',
		password:'123456'
	}//要被提交的数据
})

这里又有一个知识点需要了解

addEventListener方法

该方法是向指定元素添加一个事件监听器。这个方法允许你指定当某个事件发生时应该执行的函数，从而使得网页可以响应用户的操作，如点击、按键、鼠标移动等。

基本语法：

element.addEventListener(event, function, useCapture);
  • element：这是要绑定事件监听器的 DOM 元素。
  • event：一个字符串，表示监听的事件类型（不含 "on"），比如 "click"、"mouseover"、"keydown" 等。
  • function：当事件发生时，浏览器将调用的函数。这个函数会接收一个事件对象作为其参数，你可以通过这个对象获取到关于事件的更多信息，如触发事件的元素、按下的键等。
  • useCapture：一个可选的布尔值，指定事件是在捕获阶段（true）还是冒泡阶段（false）被处理。如果省略，或者设置为 false，则事件处理函数在冒泡阶段被调用。

简单例子（处理点击事件）

document.getElementById("myButton").addEventListener("click", function() {
  alert("按钮被点击了！");
});

这个例子中当ID为myButton的元素被点击时，会弹出一个警告框显示”按钮被点击了!“。这种方式添加事件监听器的好处是你可以向同一个元素添加多个事件监听器。

例子如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<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:"zjb521scx",
					   password:"123456"
				   }
			   }).then(result=>{
				   console.log(result)
			   })
		   })
		</script>
	</body>
</html>

结果如下

总结

1.请求方法表明对服务器资源的操作，最为常见的2个方法

POST提交数据，GET查询数据

2.axios的核心配置

URL：请求URL网址

method：请求方法，GET可以省略（不区分大小写）

params：查询参数

data：提交数据

GET请求图

POST请求图

posted @ 2024-01-25 10:31  scxlzb  阅读(58)  评论(0)    收藏  举报