axio请求获取网络数据

最新推荐文章于 2023-08-07 21:47:43 发布

Java晓姐姐

最新推荐文章于 2023-08-07 21:47:43 发布

阅读量245

点赞数

分类专栏：前端文章标签：前端 javascript

本文链接：https://blog.csdn.net/m0_60323584/article/details/126578103

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>axio请求获取网络数据</title>
    <style>

    </style>
</head>
<body>
    <input type="button" value="get请求" class="get" />
	<input type="button" value="post请求" class="post" />
</body>
</html>
<!-- axios基于ajax 
	axios必须先导入才可以使用
	使用get或post方法即可发送对应的请求
	then方法中的回调函数会在请求成功或失败时触发
-->
<!-- <script src="./js/vue.js"></script> -->
<script src="./js/axios.min.js"></script>
<script>
	/* 
		接口1:随机笑话
		请求地址:https://autumnfish.cn/api/joke/list
		请求方法:get
		请求参数:num(笑话条数,数字)
		响应内容:随机笑话
	*/
     document.querySelector(".get").onclick = function() {
		 axios.get("https://autumnfish.cn/api/joke/list?num=6")
		 .then(function(response) {
			 console.log(response);
		 },function(err){
			 console.log(err);
		 })
	 }
	 /*
	 	接口2:用户注册
	 	请求地址:https://autumnfish.cn/api/user/reg
	 	请求方法:post
	 	请求参数:username(用户名,字符串)
	 	响应内容:注册成功或失败
	 */
	  document.querySelector(".post").onclick = function() {
	 	 axios.post("https://autumnfish.cn/api/user/reg12",{username:"盐焗西兰花"})
	 	 .then(function(response) {
	 		 console.log(response);
	 	 },function(err){
	 		 console.log(err);
	 	 })
	  }
</script>