前端vue的get和post请求
生活随笔
收集整理的這篇文章主要介紹了
前端vue的get和post请求
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
vue的get和post需要兩個文件vue.js和vue-resource.js
以下是實現的代碼，可以參考一下，需要注意的接口的請求需要考慮跨域的問題，其次就是訪問頁面需要在tomcat下訪問，否則也會報跨域的問題
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <title>test</title> <meta name="author" content="xiewg@cebserv.com" /> <meta name="copyright" content="www.doyoe.com" /> <script src="js/vue.js"></script> <script src="js/vue-resource.js"></script> <script src="js/jquery.min.js"></script> <style> p~p{color:#f00;} </style> </head> <body> <div id="app"> <table> <tr v-for="item in message"> <td>{{item.expertId}}</td> <td>{{item.categoryName}}</td> </tr> </table> <button v-on:click="greet">get</button> <button v-on:click="postgreet">post</button> </div><script type="text/javascript"> //var books={[]}; //{ // [ // {"id":1,"author":"曹雪芹","name":"紅樓夢","price":32}, // {"id":2,"author":"施耐庵","name":"水滸傳","price":30}, // {"id":"3","author":"羅貫中","name":"三國演義","price":24}, // {"id":4,"author":"吳承恩","name":"西游記","price":20} // ] //} new Vue({ el: '#app', data:{ message: [ {"id":1,"author":"曹雪芹","name":"紅樓夢","price":32}, {"id":2,"author":"施耐庵","name":"水滸傳","price":30}, {"id":"3","author":"羅貫中","name":"三國演義","price":24}, {"id":4,"author":"吳承恩","name":"西游記","price":20} ] }, created: function () { //this.greet(); }, ready:function(){ // this.greet(); }, methods:{greet: function (event) { //`this` 在方法里指向當前 Vue 實例 this.$http.get('http://172.16.1.218:58080/API/app/expertCategory/getQuestionList?expertCategoryId=2').then(function(data){ //this.books=data.body.data; alert(data.body.returnCode); this.message=data.body.resultData; //this.$set('books', data.body); },function(res){ console.log(res.status); }); //alert('Hello ' + this.book + '!') //`event` 是原生 DOM 事件 // if (event) { // alert(event.target.tagName) // } }, postgreet: function (event) { //`this` 在方法里指向當前 Vue 實例 this.$http.post('http://localhost:8080/customer/getCustomer',{param:1111}).then(function(data){ //this.books=data.body.data; alert(data.body.message); //this.message=data; this.greet(); },function(res){ console.log(res.status); }); //alert('Hello ' + this.book + '!') //`event` 是原生 DOM 事件 // if (event) { // alert(event.target.tagName) // } }, } }) </script> </body></html>
?
轉載于:https://www.cnblogs.com/xwgcxk/p/8855682.html
總結
以上是生活随笔為你收集整理的前端vue的get和post请求的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 五菱混动一箱油能跑多远？横跨广西、湖南、
- 下一篇： vue插槽的使用（slot）