Vue.js 教程
Vue 要實現(xiàn)異步加載需要使用到 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 請求實例，請求地址是一個簡單的 txt 文本：
如果需要傳遞數(shù)據(jù)，可以使用 this.$http.get('get.php',{params : jsonData}) 格式，第二個參數(shù) jsonData 就是傳到后端的數(shù)據(jù)。
this.$http.get('get.php',{params : {a:1,b:2}}).then(function(res){
document.write(res.body);
},function(res){
console.log(res.status);
});
post 發(fā)送數(shù)據(jù)到后端，需要第三個參數(shù) {emulateJSON:true}。
emulateJSON 的作用： 如果Web服務(wù)器無法處理編碼為 application/json 的請求，你可以啟用 emulateJSON 選項。
demo_test_post.php 代碼如下：
<?php $name = isset($_POST['name']) ? htmlspecialchars($_POST['name']) : ''; $city = isset($_POST['url']) ? htmlspecialchars($_POST['url']) : ''; echo '網(wǎng)站名: ' . $name; echo "n"; echo 'URL 地址: ' .$city; ?>
你可以使用全局對象方式 Vue.http 或者在一個 Vue 實例的內(nèi)部使用 this.$http來發(fā)起 HTTP 請求。
// 基于全局Vue對象使用http
Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback);
Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);
// 在一個Vue實例內(nèi)使用$http
this.$http.get('/someUrl', [options]).then(successCallback, errorCallback);
this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);vue-resource 提供了 7 種請求 API(REST 風(fēng)格)：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 名稱是標(biāo)準(zhǔn)的 HTTP 方法。
options 參數(shù)說明:
| 參數(shù) | 類型 | 描述 |
|---|---|---|
| url | string |
請求的目標(biāo)URL |
| body | Object, FormData, string |
作為請求體發(fā)送的數(shù)據(jù) |
| headers | Object |
作為請求頭部發(fā)送的頭部對象 |
| params | Object |
作為URL參數(shù)的參數(shù)對象 |
| method | string |
HTTP方法 (例如GET，POST，...) |
| timeout | number |
請求超時（單位：毫秒） (0表示永不超時) |
| before | function(request) |
在請求發(fā)送之前修改請求的回調(diào)函數(shù) |
| progress | function(event) |
用于處理上傳進(jìn)度的回調(diào)函數(shù) ProgressEvent |
| credentials | boolean |
是否需要出示用于跨站點請求的憑據(jù) |
| emulateHTTP | boolean |
是否需要通過設(shè)置X-HTTP-Method-Override頭部并且以傳統(tǒng)POST方式發(fā)送PUT，PATCH和DELETE請求。 |
| emulateJSON | boolean |
設(shè)置請求體的類型為application/x-www-form-urlencoded |
通過如下屬性和方法處理一個請求獲取到的響應(yīng)對象：
| 屬性 | 類型 | 描述 |
|---|---|---|
| url | string |
響應(yīng)的 URL 源 |
| body | Object, Blob, string |
響應(yīng)體數(shù)據(jù) |
| headers | Header |
請求頭部對象 |
| ok | boolean |
當(dāng) HTTP 響應(yīng)碼為 200 到 299 之間的數(shù)值時該值為 true |
| status | number |
HTTP 響應(yīng)碼 |
| statusText | string |
HTTP 響應(yīng)狀態(tài) |
| 方法 | 類型 | 描述 |
| text() | 約定值 |
以字符串方式返回響應(yīng)體 |
| json() | 約定值 |
以格式化后的 json 對象方式返回響應(yīng)體 |
| blob() | 約定值 |
以二進(jìn)制 Blob 對象方式返回響應(yīng)體 |