前端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

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/251940.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/251940.shtml
英文地址，請注明出處：http://en.pswp.cn/news/251940.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！