axios初学（1）——get、post请求发送数据

最新推荐文章于 2025-06-27 13:47:48 发布

from_shanghai

最新推荐文章于 2025-06-27 13:47:48 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： axios

本文链接：https://blog.csdn.net/from_shanghai/article/details/99081032

axios 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了axios作为vue2.0推荐的HTTP库，如何通过npm或cdn引入，以及如何使用axios进行get、post请求来发送数据给PHP。在get请求中，详细解释了如何传递参数，并提到get.html和post.html中直接引入axios.js可能存在的问题。学习方法包括代码记忆和对比学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue.js 本身不支持发送ajax，需要依赖（vue1.0）vue-resource、（vue2.0）axios jquery（ajax）
vue2.0 不推荐 vue-resource

axios是一个基于Promise的http请求客户端
用来来发送请求

npm安装
$ npm install axios
bower安装
$ bower install axios
通过cdn
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

get.html:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="../js/vue-2.6.10.js"></script>
	<!-- <script src="../js/axios.js"></script> -->
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<title>发送get请求</title>
	<script type="text/javascript">
		window.onload=function(){
			new Vue({
				el:'#app',
				data:{
					users:{
						name:'',
						age:''
					}
				},
				methods:{
//axios.get 的发送参数有两种，两个ajax请求函数都可实现
sendGetByStr(){
//1.get通过直接发送字符串拼接
axios.get('get.php?name=${this.users.name}&age=${this.user.age}')
.then(function (response) {
	console.log(response.data);
})
.catch(function (error) {
	console.log(error);
});
},
sendGetByobj(){
	//2.get通过params选项
	axios.get('get.php?',{
		params:{
			name:this.users.name,
			age:this.users.age
		}
	})
		.then(function(response) {
			console.log(response.data);
		})
		.catch(function(error) {
			console.log(error);
		});
}

				}
			});
		}
	</script>
</head>
<body>
	<div id="app">
		<input type="text" :name="users.name" v-model="users.name" placeholder="姓名">
		<input type="text" :age="users.age" v-model="users.age" placeholder="年龄">
		<button @click="sendGetByStr">发送get请求</button>
	</div>
</body>
</html>

get.php:

<?php
	$name=$_GET["name"];
	$age=$_GET["age"];
	echo "姓名:".$name","."年龄:".$age
?>

post.html:

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="../js/vue-2.4.10.js"></script>
	<script src="../js/axios.js"></script>
	<script>
		window.onload=function(){
			new Vue({
				el:'#app',
				data:{
					users:{
						name:'',
						age:''
					}
				},
				methods:{
					sendPost(){
						axios.post('post.php',{
							name:this.users.name,
							age:this.users.age,
						})
						.then(function (response) {
							console.log(response);
						})
						.catch(function (error) {
							console.log(error);
						});
					}
				}
			});
		}
	</script>
</head>
<body>
		<div id="app">
			<input type="text" :name="user.name" v-model="user.name" placeholder="姓名">
		<input type="text" :age="users.age" v-model="users.age" placeholder="年龄">
		</div>
</body>
</html>

post.php:

<?php
	$name=$_POST["name"];
	$age=$_POST["age"];

	echo "姓名:".$name.","."年龄:".$age
?>

echo "xxx".$num/string.","."xxx".$num/string
xxx 是中文或者 标点符号 逗号
num/string  是被传递的数据，前面一定要有 $ 
比较不理解 这个点 . 是怎么弄的
【待定】


你会发现，通过post  传递的参数 没有在 控制台上，因为 这种方式 传递的数据 是Payload

所以对 post.html 中的methods里的sendPost() 进行改动

sendPost(){
	axios.post('post.php', this.users,{
		//transformRequest 就是用来处理转换的
		transformRequest:[
			function(data)=>{
			let transObj='';
			for(let i in data){
			transObj += i+ '=' + data[i] + '&';
		}
			return transObj;
		}
		]	
})
	.then(function (response) {
	console.log(response.data);
})
	.catch(function (errror) {
	console.log(error);
});
}

发送请求，并且在控制台上输出：姓名:xxx,年龄:xxx 背后逻辑代码
通俗的说 axios怎么应用，怎么发送数据给 get.php/post.php (这个应该是前端了解的了)
也就是数据传输流程
这里虽然是 get、post请求，但却是发送数据给 php，而不是请求数据，要注意
至于 get.php 和 post.php具体怎么写好像是后端的事
get.html 发送get请求
get请求有两个参数，也是这两个参数把name、age名传给 php文件
也就是说 axios.get('xxx')里 xxx 肯定有一句话写着 get.php? 或者 post.php?
这句话就表明发过去的数据和 xxx.php 有关系了

这里有个问题是，get.html 和 post.html 中我直接引入的 axios.js 无效

不知道是不是在github上下载错了

说实话，我看不懂 github 上那么多文件夹，我只是想找个可以直接引用的库啊

对于跨域请求  axios还没有解决方法  
不过可以使用 vue-resource的 jsonp

<!DOCTYPE html>
<html>
<head>
	<script src="../js/vue-2.4.10.js"></script>
	<script src="../js/axios.js"></script>
	<title>输入用户名获取github上的账户信息</title>
	<script type="text/javascript">
		window.onload=function(){
			new Vue({
				el:'#app',
				data:{
					id:'',
					userData:''
				},
				methods:{
					getData(){
						this.$http.jsonp(`https://api.github.com/users/${this.id}`).then(function(resp){
							this.userData=resp.data.data;
						});
					}
				}				
			});
//new Vue({});    后面要加 分号
//getData(){}.then(function(){});  分号；then()函数里面 resp.data.data 不懂
//then  里面是回调函数吗？
		}
	</script>
</head>
<body>
	<div id="app">
		<input type="text" name="" v-model="id" placeholder="姓名">
		<button @click="getData">获取github账户信息</button>
	<div v-for="(v,k) in userData">{{k}}:{{v}}</div>
	</div>
</body>
</html>
//1.点击 “获取github账户信息”的 按钮，调用 vue实例中的 getData方法
//2.getData 方法 写了 怎么 获取github账户信息
this.$http.jsonp() 括号里 写跨域请求 的 地址
.then()函数里 的 参数 就是 返回的数据

显然，$http.jsonp怎么请求到的数据，又怎么返回的  （这句话可能不对）
内部是怎么样的，就不知道了

v-for 列表渲染 拿到的 userData

学习方法总结：
1.代码那些要记住要学会的就边背写边看最后完整背写一遍
2.你说我为什么把代码发到博客上
因为是一篇方便对比方便随时看手机上就可以复习
3.源码放在笔记本文件夹下做个存档

原文地址：

https://www.jianshu.com/p/a5fc834ea028

现在简书和思否都挺不错的，那上面回答不错