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

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