Vue.js Ajax(vue-resource)
Vue 要實現非同步載入需要使用到 vue-resource 庫。
Vue.js 2.0 版本推薦使用 axios 來完成 ajax 請求。
<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.php',{params : jsonData}) 格式,第二個引數 jsonData 就是傳到後端的資料。
this.$http.get('get.php',{params : {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.php',{name:"入門教學",url:"http://www.itread01.com"},{emulateJSON:true}).then(function(res){
document.write(res.body);
},function(res){
console.log(res.status);
});
}
}
});
}
嘗試一下 ?
demo_test_post.php 程式碼如下:
<?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 物件方式返回響應體 |