ホーム > >

Vue.js Ajax(vue-resource)

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引数の説明

引数説明
urlstringリクエストのターゲットURL
bodyObject, FormData, stringリクエストとして送信されるデータ
headersObjectリクエストヘッダーとして送信されるヘッダーオブジェクト
paramsObjectURL引数としての引数オブジェクト
methodstringHTTPメソッド(例えばGET、POST、…)
timeoutnumberリクエストがタイムアウト(単位:ミリ秒)(0は永久に待機することを意味する)
beforefunction(request)リクエストが送信される前に、リクエストコールバック関数を変更する
progressfunction(event)アップロードの進行状況を処理するためのコールバック関数ProgressEvent
credentialsbooleanクロスサイトリクエストの資格情報を表示する必要があるかどうか
emulateHTTPbooleanX-HTTP-Method-Overrideヘッダーを設定し、従来のPOSTメソッドでPUT、PATCH、およびDELETE要求を送信する必要があるかどうか
emulateJSONbooleanリクエストの型をapplication/x-www-form-urlencodedに設定する

次のプロパティとメソッドを使用して、リクエストから取得した応答オブジェクトを処理します。

プロパティ説明
urlstring応答のURLソース
bodyObject, Blob, string応答の本文データ
headersHeaderリクエストヘッダーオブジェクト
okbooleanHTTP応答コードが200〜299の場合、値はtrueである
statusnumberHTTP 応答コード
statusTextstringHTTP 応答状況

メソッド説明
text()従来値応答本文を文字列として返す
json()従来値応答本文をフォーマットされたjsonオブジェクトとして返す
blob()従来値応答本文をバイナリBlobオブジェクトとして返す

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です