Posted at
vte.cxDay 6

【vte.cx入門】5.登録したデータを参照する:jQuery実践編

More than 3 years have passed since last update.

データ登録を行ったら、今度はそのデータを参照してみましょう。

ここではjQueryを利用したデータ参照の方法を以下に記します。


1.ajaxで登録データを取得する(GETリクエスト)

上記データをjQueryのajax通信を使用し、GETリクエストを実行します。


javascript

$.ajax({

url: '/d/{uid}?f',
method: 'get'
}).done(function(res) {
alert('取得成功');
}).fail(function( jqXHR, textStatus, errorThrown ) {
alert('取得失敗');
});


■リクエスト

param

url
取得先URL?f
/d/{uid}?f

method
GET


uidの取得方法

以下のURLを画面で開いてください。すると自分のuidが取得できます。

※uidを取得するにはログインが必要です。

https://{自分のサービス}/d/?_uid

レスポンス

{'feed': {'title': (uid)}}}

取得したuidをurlに使用してください。


URLパラメータ

URLにパラメータを付与することで、様々な検索ができるようになります。

・パラメータ一覧

param

?f
一覧取得
url配下のデータ一覧を取得する。

?e
自身取得
urlのデータ1件を取得する。

?x
XML変換
データをXML形式で取得する。

その他詳しいパラメータの説明はこちらをご覧ください。条件検索について


■レスポンス


ステータス

ステータス
メッセージ
レスポンス

200
OK
feed形式のデータ一覧

204
No entry
(空)

204 No entryの場合は、取得先の配下に何も登録されていない状態です。

/d/{uid}にデータを登録してみましょう。(データ登録方法

その他のエラーの場合、以下の仕様書の下部に細かく記載されています。

HTTPステータス一覧


2.?fパラメータで取得したデータ内容を確認する

?fパラメータを使用しajaxで取得したデータは以下のような内容になっていると思います。

{

feed: {
entry: [
{
userinfo: {
id: 12345,
email: hoge@foo.com
},
favorite: {
food: 'りんご',
music: 'J-POP'
},
id: '/{uid}/1-1-23-23123, 1'
},
{
userinfo: {
id: 98765,
email: bor@foo.com
},
favorite: {
food: 'バナナ'
}
id: '/{uid}/1-1-23-098123, 1'
}
]
}
}

このように?fを指定するとURLの配下にある複数のentryが取得できます。


3.?eパラメータで取得したデータ内容を確認する

一方で、?eパラメータを使用しajaxで取得したデータは以下のような内容になっていると思います。

リクエスト


javascript

$.ajax({

url: '/d/{uid}?e',
method: 'get'
}).done(function(res) {
alert('取得成功');
}).fail(function( jqXHR, textStatus, errorThrown ) {
alert('取得失敗');
});

レスポンス

{

feed: {
entry: [
{
link: [{
___href: '/{uid}',
___rel: 'self'
}],
id: '/{uid},1'
}
]
}
}

?eパラメータを指定するとURL自身のentryが取得できます。


4. HTML(JavaScript)によるデータ参照

取得したデータは既存のJSON形式と同じです。

以下のように値を参照できます。


javascript

var name = feed.entry[0].favorite.food

console.log('food : ' + food);


コンソール

food : りんご


以上でデータの取得方法の説明を終わります。

次回はデータの更新方法について記述いたします。