Vueは、非同期ロードを実装するためにvue-resourceライブラリを使用する必要があります。
Vue.jsバージョン2.0では、axiosを使用してajaxリクエストを完了することをお勧めします。
GETメソッド
次には、簡単なGetメソッドの例であり、HTTPリクエストは簡単なtxtテキストです。
例
function doit(){
var vm = new Vue({
el:'#box',
data:{
msg:'Hello World!',
},
methods:{
get:function(){
this.$http.get('/files/getdata.txt').then(function(res){
document.write(res.body);
},function(){
console.log('Sync data failed');
});
}
}
});}
doit();
データを渡す必要がある場合は、this.$http.get(‘get.php’,{params : jsonData})形式を使用できます。2番目の引数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がデータをバックエンドに送信するには、3番目の引数{emulateJSON:true}が必要です。
emulateJSONの役割:Webサーバーがapplication/jsonとしてエンコードされた要求を処理できない場合は、emulateJSONオプションを有効にすることができます。
例
function doit(){
var vm = new Vue({
el:'#box',
data:{
msg:'Hello World!',
},
methods:{
post:function(){
this.$http.post('/files/postdata.php',{name:"Florian Studio",url:"http://www.ceodata.com"},{emulateJSON:true}).then(function(res){
document.write(res.body);
},function(res){
console.log(res.status);
});
}
}
});}
doit();
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オブジェクトとして返す |
コメントを残す