Vue resource三種請求格式和萬能測試地址
更新時間：2018年09月26日 11:05:58 作者：RainbowSkr
這篇文章主要介紹了Vue-resource三種請求格式和萬能測試地址,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
注意：
1.前端服務器測試地址的萬能地址，太好用了http://jsonplaceholder.typicode.com/users，基本能響應各種請求。點擊進入官網(wǎng)
2.這里測試只寫了成功的回調(diào)函數(shù)，同時還要失敗時的回調(diào)函數(shù)。
HTML代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../lib/vue.js"></script>
<script src="../lib/vue-resource.js"></script>
<!--vue-resource是基于vue.js的，要后導入-->
</head>
<body>
<div id="app">
<input type="button" value="get方式" v-on:click="getInfo">
<input type="button" value="post方式" v-on:click="postInfo">
<input type="button" value="jsonp方式" v-on:click="jsonpInfo">
</div>
<script>
var vm = new Vue({
el:'#app',
data:{},
methods:{
getInfo(){
this.$http.get('http://jsonplaceholder.typicode.com/users').then(result=> {
console.log(result.body);
})
},
//get請求，通過function執(zhí)行的成功的回調(diào)函數(shù)，得到body和data等數(shù)據(jù)
postInfo(){
this.$http.post('http://jsonplaceholder.typicode.com/users',{},{emulateJSON:true}).then(result=>{
console.log(result.body);
})
},
//post請求，中間花括號空的部分為提交給服務器的數(shù)據(jù)這里默認，emulateJSON:true,將手動提交表單格式設置為application/x-www-form-urlencoded格式
jsonpInfo(){
this.$http.jsonp('http://jsonplaceholder.typicode.com/users').then(result=>{
console.log(result.body)
})
}
}
});
</script>
</body>
效果：依次點擊按鈕得到的結(jié)果
總結(jié)
以上所述是小編給大家介紹的Vue resource三種請求格式和萬能測試地址，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了vue組件中實現(xiàn)嵌套子組件案例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要給大家介紹了關(guān)于vue中跳轉(zhuǎn)界面的3種實現(xiàn)方法,文中通過實例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了vue axios封裝httpjs,接口公用配置攔截操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
vue 中Virtual Dom被創(chuàng)建的方法
本文將通過解讀render函數(shù)的源碼，來分析vue中的vNode是如何創(chuàng)建的,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-04-04
這篇文章主要介紹了完美解決vue 中多個echarts圖表自適應的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了解決echarts中橫坐標值顯示不全(自動隱藏)問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要為大家介紹了VueJs中customRef函數(shù)使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04
vue自定義鍵盤信息、監(jiān)聽數(shù)據(jù)變化的方法示例【基于vm.$watch】
這篇文章主要介紹了vue自定義鍵盤信息、監(jiān)聽數(shù)據(jù)變化的方法,結(jié)合實例形式分析了vue.js基于vm.$watch進行事件監(jiān)聽相關(guān)操作技巧,需要的朋友可以參考下2019-03-03
Vue Tour 是一個方便的 Vue.js 插件,它可以幫助我們在網(wǎng)站或應用中實現(xiàn)簡單而靈活的頁面導覽功能,本文我們將介紹如何在 Vue 3 中使用 Vue Tour,并通過示例代碼演示其基本用法,需要的朋友可以參考下2024-04-04
vue事件監(jiān)聽函數(shù)on中的this指針域使用
這篇文章主要介紹了vue事件監(jiān)聽函數(shù)on中的this指針域使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08