<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../js/vue.js"></script>
<script src="../js/axios-0.18.0.js"></script>
</head>
<body>
<h2>axios.post发送请求</h2>
<div id ="app">
<button @click="getData">get</button>
</div>
<h2>axios发送请求</h2>
<div id ="app1">
<button @click="getData">get</button>
</div>
<script>
//创建Vue实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
created () {
},
methods: {
getData(){
// 传参方式：
// url, "参数1=值&参数2=值"
axios.post("http://localhost:8080/dataBag_war_exploded/GetDataServlet", "id=10&name=1").then(
dataProject=>{
alert(JSON.stringify(dataProject.data))
}
).catch(
error=>{
alert(JSON.stringify(error))
}
)
}
}
});
new Vue({
el: "#app1",
methods: {
getData(){
var us = new URLSearchParams();
us.append("id", 1);
us.append("way", "getData");
axios(
{
// get请求传送的数据展示在请求体中，只能使用url后拼接传输数据
method: "post",
url: "http://localhost:8080/dataBag_war_exploded/GetDataServlet",
// data中的数据，服务器端无法直接获取
// data:{
// id: 1,
// wya: "getData",
// },
// params中的数据会直接获取,但是数据不会进行url编码
params:{
id: 1,
wya: "getData"
},
// 服务器端可以获取数据也会进行编码
data:us
}
).then(
dataProject=>{
alert(JSON.stringify(dataProject))
}
).catch(
error=>{
alert(JSON.stringify(error))
}
)
}
}
})
</script>
</body>
</html>
版权声明：本文为AK47red原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。