Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

More than 5 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 : りんご

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

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

takeyama
AngularJS始めたばかりの初心者です
http://reflexworks.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away