get请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../vue1026.js"></script>
<script src="../vue-resource.min.js"></script>
</head>
<body>
<div id="app">
<button @click="getdata()">get请求</button>
{{dataOne | json}}
</div>
<script >
new Vue({
el: "#app",
data:{
dataOne:'',
},
methods:{
getdata:function () {
var url="http://192.168.1.61:9070/api/Materiel/GetATSDistribution";
this.$http.get(url)
.then(function (response) {
console.log(response.body)
this.dataOne=response.body;
})
}
}
})
</script>
</body>
</html>
post请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../vue1026.js"></script>
<script src="../vue-resource.min.js"></script>
</head>
<body>
<div id="app">
<button @click="postdata()">post请求</button>
{{dataOne | json}}
</div>
<script >
new Vue({
el: "#app",
data:{
dataOne:'',
},
methods:{
postdata:function () {
var url="http://192.168.1.61:9070/api/Materiel/GetATSDistribution";
//传到服务器的请求文体的数据， emulateJSON:true固定写法
this.$http.post(url,{
"NAMES":"空余"
},
{
emulateJSON:true
})
.then(function(response){
console.log(response)
})
}
}
})
</script>
</body>
</html>
JSONP请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../vue1026.js"></script>
<script src="../vue-resource.min.js"></script>
</head>
<body>
<div id="app">
<button @click="Jsonp()">get请求</button>
{{dataOne | json}}
</div>
<script >
new Vue({
el: "#app",
data:{
dataOne:null,
},
methods:{
Jsonp:function () {
this.$http.jsonp("http://192.168.1.61:9070/api/Materiel/GetATSDistribution")
.then(function (response) {
this.dataOne=response.body
console.log(response)
})
}
}})
</script>
</body>
</html>