Vue axios POST请求

Vue axios POST请求教程

使用 Vue 的 axios 可以发送 HTTP 的 POST 请求，用于新增一条数据。

Vue axios POST请求详解

语法

axios.POST(url, data).then((resp)=>{});

参数

参数	描述
POST	我们需要发送的是 Vue axios POST 请求。
url	请求的服务器的 url。
data	发送 POST 请求携带的数据。
then	即请求完成后，服务器的回调。

案例

Vue axios POST请求

使用 Vue-resource post 请求，新增一条数据

<!DOCTYPE html>
<html>
<head>
	<title>Vue axios post请求</title>
	<script type="text/javascript" src="./lib/vue-2.6.10.min.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
	<div id="app">
		<input type="button" value="axios post 请求" @click='postInfo'>
        <p>嗨客网（www.haicoder.net）</p>
	</div>
</body>
<script type="text/javascript">
	var vm = new Vue({
        el : '#app',
        data:{
        	msg: "嗨客网"
        },
        methods:{
        	postInfo() {
                axios.post('http://localhost:3000/Server', {"id":"4", "category":"C++", "author": "HaiCoder5"}).then((data)=>{
                	console.log(data);
                });
        	}
        }
    });
</script>
</html>

我们点击按钮，向 JsonServer 发送请求，请求成功后，浏览器输出如下内容：

04 vue axios post.png

我们通过 Vue-resource 发送了 HTTP 的 post 请求，向原来的数据的 Server 里面新增了一条数据，在成功的回调函数中，获取服务器返回的数据。

我们再次，使用 GET 请求，获取 Server 模块的新数据，输入以下代码：

<!DOCTYPE html>
<html>
<head>
	<title>Vue-axios get请求</title>
	<script type="text/javascript" src="./lib/vue-2.6.10.min.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
	<div id="app">
		<input type="button" value="axios GET 请求" @click='getInfo'>
        <p>嗨客网（www.haicoder.net）</p>
	</div>
</body>
<script type="text/javascript">
	var vm = new Vue({
        el : '#app',
        data:{
        	msg: "嗨客网"
        },
        methods:{
        	getInfo() {
                axios.get('http://localhost:3000/Server').then((data)=>{
                	console.log(data);
                });
        	}
        }
    });
</script>
</html>

我们点击按钮，向 JsonServer 发送请求，请求成功后，浏览器输出如下内容：

05 vue axios post.png

我们可以看到，刚才使用 POST 请求已经成功添加一条数据。

Vue axios POST请求总结

使用 Vue 的 axios 可以发送 HTTP 的 POST 请求。Vue axios POST 请求语法为：

axios.POST(url, data).then((data)=>{});