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>