Vue.js Ajax(vue-resource)
Vue で非同期ロードを実現するには、vue-resource ライブラリを使用する必要があります。
Vue.js 2.0 バージョンでは、次を使用することを推奨していますaxiosajax リクエストを完了するために。
<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})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 オプションを有効にできます。
例
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.example.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 |
ヘッダーを設定して従来の POST 方式で送信する必要があるかどうかX-HTTP-Method-OverridePUT、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 オブジェクトとしてレスポンスボディを返します |