top
Loading...
Vue.js Ajax(vue-resource)

Vue.js Ajax(vue-resource)

Vue 要實現異步加載需要使用到 vue-resource 庫。

<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>

Get 請求

以下是一個簡單的 Get 請求實例,請求地址是一個簡單的 txt 文本:

實例

window.onload = function(){ var vm = new Vue({ el:'#box', data:{ msg:'Hello World!', }, methods:{ get:function(){ //發送get請求 this.$http.get('/try/ajax/ajax_info.txt').then(function(res){ document.write(res.body); },function(){ console.log('請求失敗處理'); }); } } }); }

嘗試一下 »

如果需要傳遞數據,可以使用 this.$http.get('get.asp',jsonData) 格式,第二個參數 jsonData 就是傳到後端的數據。

this.$http.get('get.asp',{a:1,b:2}).then(function(res){
    document.write(res.body);    
},function(res){
    console.log(res.status);
});

post 請求

post 發送數據到後端,需要第三個參數 {emulateJSON:true}

emulateJSON 的作用: 如果Web服務器無法處理編碼為 application/json 的請求,你可以啟用 emulateJSON 選項。

實例

window.onload = function(){ var vm = new Vue({ el:'#box', data:{ msg:'Hello World!', }, methods:{ post:function(){ //發送 post 請求 this.$http.post('/try/ajax/demo_test_post.asp',{name:"教程",url:"http://www.sharebody.com"},{emulateJSON:true}).then(function(res){ document.write(res.body); },function(res){ console.log(res.status); }); } } }); }

嘗試一下 »

demo_test_post.asp 代碼如下:

<?php
$name = isset($_POST['name']) ? htmlspecialchars($_POST['name']) : '';
$city = isset($_POST['url']) ? htmlspecialchars($_POST['url']) : '';
echo '網站名: ' . $name;
echo "\n";
echo 'URL 地址: ' .$city;
?>

語法 & API

你可以使用全局對象方式 Vue.http 或者在一個 Vue 實例的內部使用 this.$http來發起 HTTP 請求。

// 基於全局Vue對象使用http
Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback);
Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);
// 在一個Vue實例內使用$http
this.$http.get('/someUrl', [options]).then(successCallback, errorCallback);
this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);
vue-resource 提供了 7 種請求 API(REST 風格):
get(url, [options])
head(url, [options])
delete(url, [options])
jsonp(url, [options])
post(url, [body], [options])
put(url, [body], [options])
patch(url, [body], [options])

除了 jsonp 以外,另外 6 種的 API 名稱是標准的 HTTP 方法。

options 參數說明:

參數 類型 描述
url string 請求的目標URL
body Object, FormData, string 作為請求體發送的數據
headers Object 作為請求頭部發送的頭部對象
params Object 作為URL參數的參數對象
method string HTTP方法 (例如GET,POST,...)
timeout number 請求超時(單位:毫秒) (0表示永不超時)
before function(request) 在請求發送之前修改請求的回調函數
progress function(event) 用於處理上傳進度的回調函數 ProgressEvent
credentials boolean 是否需要出示用於跨站點請求的憑據
emulateHTTP boolean 是否需要通過設置X-HTTP-Method-Override頭部併且以傳統POST方式發送PUT,PATCH和DELETE請求。
emulateJSON boolean 設置請求體的類型為application/x-www-form-urlencoded

通過如下屬性和方法處理一個請求獲取到的響應對象:

屬性 類型 描述
url string 響應的URL源
body Object, Blob, string 響應體數據
headers Header 請求頭部對象
ok boolean 當HTTP響應碼為200到299之間的數值時該值為true
status number HTTP響應嗎
statusText string HTTP響應狀態
方法 類型 描述
text() 約定值 以字符串方式返回響應體
json() 約定值 以格式化後的json對象方式返回響應體
blob() 約定值 以二進製Blob對象方式返回響應體
北斗有巢氏 有巢氏北斗