<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../lib/vue.js"></script>
<script src="../lib/vue-resource-1.3.4.js"></script>
<!-- 注意 vue-resource依賴於vue,注意先後順序導包 -->
</head>
<body>
<div id="app">
<input type="button" value="get請求" @click="getInfo">
<input type="button" value="post請求" @click="postInfo">
<input type="button" value="jsonp請求" @click="jsonpInfo">
</div>
<script>
var vm=new Vue({
el:"#app",
data:{},
methods:{
getInfo(){
//發起get請求 當發起get請求之後,通過.then來設置成功的回調函數
//通過result.body拿到服務器返回的成功數據
this.$http.get('http://jsonplaceholder.typicode.com/users').then(function(result){
console.log(result.body);
})
},
postInfo(){
//手動發起的post請求,默認沒有表單格式,所以有的服務器處理不了
//通過post方法的第三個參數設置提交的內容類型爲普通表單數據
this.$http.post('http://jsonplaceholder.typicode.com/users',{},{emulateJSON:true}).then(result=>{
console.log(result.body);
})
},
jsonpInfo(){//發起jsonp請求
this.$http.jsonp('http://jsonplaceholder.typicode.com/users').then(result=>{
console.log(result.body)
})
}
}
})
</script>
</body>
</html>
Vue——13——vue resource發起get post jsonp請求
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
vue在history的路由模式下，刷新後界面報404
需要配置下nginx，位置在/conf/vhosts/*.conf，將當前目錄下的所有conf都修改一下最好 server { listen 80; server_name agwenb