Vue resource三種請(qǐng)求格式和萬能測試地址
更新時(shí)間：2018年09月26日 11:05:58 作者：RainbowSkr
這篇文章主要介紹了Vue-resource三種請(qǐng)求格式和萬能測試地址,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
注意：
1.前端服務(wù)器測試地址的萬能地址，太好用了http://jsonplaceholder.typicode.com/users，基本能響應(yīng)各種請(qǐng)求。點(diǎn)擊進(jìn)入官網(wǎng)
2.這里測試只寫了成功的回調(diào)函數(shù)，同時(shí)還要失敗時(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的，要后導(dǎo)入-->
</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請(qǐng)求，通過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請(qǐng)求，中間花括號(hào)空的部分為提交給服務(wù)器的數(shù)據(jù)這里默認(rèn)，emulateJSON:true,將手動(dòng)提交表單格式設(shè)置為application/x-www-form-urlencoded格式
jsonpInfo(){
this.$http.jsonp('http://jsonplaceholder.typicode.com/users').then(result=>{
console.log(result.body)
})
}
}
});
</script>
</body>
效果：依次點(diǎn)擊按鈕得到的結(jié)果
總結(jié)
以上所述是小編給大家介紹的Vue resource三種請(qǐng)求格式和萬能測試地址，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
您可能感興趣的文章:
- Vue添加請(qǐng)求攔截器及vue-resource 攔截器使用
- vue插件vue-resource的使用筆記（小結(jié)）
- vue-cli項(xiàng)目如何使用vue-resource獲取本地的json數(shù)據(jù)（模擬服務(wù)端返回?cái)?shù)據(jù)）
- Vue resource中的GET與POST請(qǐng)求的實(shí)例代碼
- 詳解vue前后臺(tái)數(shù)據(jù)交互vue-resource文檔
- vue-resource 攔截器（interceptor）的使用詳解
- 詳解vue 配合vue-resource調(diào)用接口獲取數(shù)據(jù)
相關(guān)文章
vue+jquery+lodash實(shí)現(xiàn)滑動(dòng)時(shí)頂部懸浮固定效果
這篇文章主要為大家詳細(xì)介紹了vue+jquery+lodash實(shí)現(xiàn)滑動(dòng)時(shí)頂部懸浮固定效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-04-04
這篇文章主要介紹了uniapp中uni-load-more的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-05-05
Vue+Echarts實(shí)現(xiàn)繪制多設(shè)備狀態(tài)甘特圖
這篇文章主要為大家詳細(xì)介紹了Vue如何結(jié)合Echarts實(shí)現(xiàn)繪制多設(shè)備狀態(tài)甘特圖,文中的示例代碼講解詳細(xì),有需要的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03
這篇文章主要介紹了vue中使用swiper5方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要給大家介紹了關(guān)于在vue中如何使用node.js的相關(guān)資料,vue和nodejs經(jīng)常讓新手們感到困惑,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07
這篇文章主要給大家介紹了關(guān)于Vue組件庫開發(fā)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-07-07
vue-cli+webpack記事本項(xiàng)目創(chuàng)建
這篇文章主要為大家詳細(xì)介紹了vue-cli+webpack創(chuàng)建記事本項(xiàng)目，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04
這篇文章主要介紹了Vue中的高德軌跡回放問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
小白教程|一小時(shí)上手最流行的前端框架vue（推薦）
這篇文章主要介紹了前端框架vue，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
element的表單校驗(yàn)證件號(hào)規(guī)則及輸入“無”的情況校驗(yàn)通過(示例代碼)
這篇文章主要介紹了element的表單校驗(yàn)證件號(hào)規(guī)則及輸入“無”的情況校驗(yàn)通過,使用方法對(duì)校驗(yàn)數(shù)據(jù)進(jìn)行過濾判斷,本文通過示例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2023-11-11