快捷導(dǎo)航

Vue resource三種請(qǐng)求格式和萬(wàn)能測(cè)試地址

更新時(shí)間：2018年09月26日 11:05:58 作者：RainbowSkr

這篇文章主要介紹了Vue-resource三種請(qǐng)求格式和萬(wàn)能測(cè)試地址,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

注意：

1.前端服務(wù)器測(cè)試地址的萬(wàn)能地址，太好用了http://jsonplaceholder.typicode.com/users，基本能響應(yīng)各種請(qǐng)求。點(diǎn)擊進(jìn)入官網(wǎng)

2.這里測(cè)試只寫(xiě)了成功的回調(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)求，通過(guò)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)求格式和萬(wàn)能測(cè)試地址，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

vue組件中實(shí)現(xiàn)嵌套子組件案例
這篇文章主要介紹了vue組件中實(shí)現(xiàn)嵌套子組件案例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-08-08
vue中跳轉(zhuǎn)界面的3種實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于vue中跳轉(zhuǎn)界面的3種實(shí)現(xiàn)方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2023-07-07
vue axios封裝httpjs,接口公用配置攔截操作
這篇文章主要介紹了vue axios封裝httpjs,接口公用配置攔截操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-08-08
vue 中Virtual Dom被創(chuàng)建的方法
本文將通過(guò)解讀render函數(shù)的源碼，來(lái)分析vue中的vNode是如何創(chuàng)建的,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2019-04-04
完美解決vue 中多個(gè)echarts圖表自適應(yīng)的問(wèn)題
這篇文章主要介紹了完美解決vue 中多個(gè)echarts圖表自適應(yīng)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-07-07
解決echarts中橫坐標(biāo)值顯示不全(自動(dòng)隱藏)問(wèn)題
這篇文章主要介紹了解決echarts中橫坐標(biāo)值顯示不全(自動(dòng)隱藏)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-07-07
一文搞懂VueJs中customRef函數(shù)使用
這篇文章主要為大家介紹了VueJs中customRef函數(shù)使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-04-04
vue自定義鍵盤(pán)信息、監(jiān)聽(tīng)數(shù)據(jù)變化的方法示例【基于vm.$watch】
這篇文章主要介紹了vue自定義鍵盤(pán)信息、監(jiān)聽(tīng)數(shù)據(jù)變化的方法,結(jié)合實(shí)例形式分析了vue.js基于vm.$watch進(jìn)行事件監(jiān)聽(tīng)相關(guān)操作技巧,需要的朋友可以參考下
2019-03-03
在Vue3中使用Vue Tour實(shí)現(xiàn)頁(yè)面導(dǎo)覽
Vue Tour 是一個(gè)方便的 Vue.js 插件,它可以幫助我們?cè)诰W(wǎng)站或應(yīng)用中實(shí)現(xiàn)簡(jiǎn)單而靈活的頁(yè)面導(dǎo)覽功能,本文我們將介紹如何在 Vue 3 中使用 Vue Tour,并通過(guò)示例代碼演示其基本用法,需要的朋友可以參考下
2024-04-04
vue事件監(jiān)聽(tīng)函數(shù)on中的this指針域使用
這篇文章主要介紹了vue事件監(jiān)聽(tīng)函數(shù)on中的this指針域使用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08