vue发送ajax --axios入门介绍

最新推荐文章于 2024-09-20 16:29:25 发布

string_user_get_set

最新推荐文章于 2024-09-20 16:29:25 发布

阅读量1k

点赞数

分类专栏： vue 文章标签： vue.js ajax xmlhttprequest axios

本文链接：https://blog.csdn.net/string_user_get_set/article/details/77131481

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

vue是不支持发送ajax请求的，所以需要借助axios来完成这个工作。

axios下载地址：https://github.com/mzabriskie/axios

基本用法：
axios([options]);
axios.get(url，[options]); //get方式传递参数是用过url传递
axios.post(url,data,[options]); //post方式传递参数通过data属性

注：传参方式区别：

get方式的通过url通过?key=vaule来传参,也可以设置在params属性中。

API案例：

// Make a request for a user with a given ID
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// Optionally the request above could also be done as
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

pos请求参数：虽然是模拟表单提交，实际上也是通过Key=Value的方式传递；所以如果你在传递参数的时候使用json格式的传递参数的时候要使用 transformResponse来格式化

API案例:

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

具体的可以参考AIP。

案例：标准方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>axiso发送ajax请求入门</title>
		<script type="text/javascript" src="js/vue.js" ></script>
		<script type="text/javascript" src="js/axios/axios.js" ></script>
		
		<script type="text/javascript">
			window.οnlοad=function(){
				new Vue({
					el:'#main',
					data:{
						
					},
					methods:{
						send:function(){
							axios({
								method:'get',
								url:'testData/studen.json',
							}).then(function(resp){
								console.log(resp.data);
							}).catch(resp=>{
								console.log("发送失败"+resp.status+","+resp.statusText);
							});
						}
					}
				});
			}
		</script>
		
	</head>
	<body>
		
		<div id="main">
			<button type="button" @click="send">发送ajax请求</button>
		</div>
		
	</body>
</html>

json文件：{"Id":"01","Name":"zwc","sex":"男"}

运行结果: