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 物件方式返回響應體 |