jQueryを使ったAjax入門

個別の値にアクセスする

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
jQueryを使ってAjaxを実行し取得したJSONデータの、個別の値にアクセスする方法について、解説致します。
講師:
04:23

字幕

このレッスンでは jQuery を使ってAjax を実行し取得したJson データの個別の値にアクセスする方法について解説していきます。まずはダウンロードしてきたこちらの頭が 03_02 から始まっているフォルダーの中に入っている、これら3つのファイルをエディターで開いて下さい。そしてこれがそれらのファイルを開いた状態です。これらのファイルを使って、今回のレッスンの解説を進めていきたいと思います。今回利用するファイルはこちらの index.js ファイルとこちらの data1.json ファイルとなります。では早速ファイルの中身を見ていきましょう。今回は Ajax へ取得した Json 形式のレスポンスデータの中に含まれている個別のデータにアクセスする方法です。それについて書かれた部分がこちらの index.js ファイルの中の此方の部分となります。では見ていきましょう。まずは変数を作ってあげていますね。そして、その変数の名前はshop_name です。そして = で繋いで、その後にdata そして .shopNameと書いてますね。この data はこちらの data とイコールです。 この data の変数は何かというとAjax のリクエストが成功してそしてそのtarget_url から出力されてきた結果が格納される変数でしたね。そして今回の場合はこちらの data1.json がその target_url になっているのでこのリクエストの結果この Json ファイルの中身のこの Json 形式のデータがこの data という変数の中に格納されているということになります。そして .shopName と書いてますね、これはどういうことかというとまずこの data がこちらの Json のデータとなっていてそしてその第一階層にあるshopName ということなのでこちらになります。これの値が今回は「ABC スキンケアショップ」となってますね。ですので、この data.shopName は「ABC スキンケアショップ」という形になります。それがこの変数 shop_name に代入されてくるといった形になります。このドットですが基本的にこの Json ファイルというのは階層構造のような形になっています。今回はこの第一階層ですね。data という全体があってそしてその下、第一階層目にあるshopName ということなのでdata.shopName という形になります。 もしこれが第二階層や第三階層目にある場合はこのドットを使って順順におりていってデータを取得するといった形になります。この様に入れ子になった値にアクセスする方法も以降のレッスンでご紹介しますのでそちらも合わせて参考にしてみて下さい。そして最後の、こちらの部分ですね。こちらの部分では HTML ファイルの中のdiv タグの中にこの shop_name とそして改行タグですね。これを div タグの中に加えて表示するといった処理を行っています。それでは実際にこれらの処理の動作をブラウザーで確認してみたいと思います。これが先程の3つのファイルをサーバー上に設置してそしてブラウザーで index.html にアクセスしている状態となります。それではこちらの「外部データを送信する」をクリックしてみます。するとこの様にリクエストが成功してそしてこの様に表示されましたね。これできちんと Ajax で取得したJson 形式のレスポンスデータの中の個別の値にアクセスできていることがわかりますね。以上でレッスンは終了です。今回は jQuery を使ってAjax を実行し取得した Json データの個別の値にアクセスする方法について解説いたしました。

jQueryを使ったAjax入門

AjaxとはAsynchronous JavaScript + XML の略で、JavaScriptを使って非同期通信を利用しWebサイトのコンテンツを動的に書き換える手法です。このコースではモダンなWebサイト作るうえで必須の技術となっているAjaxjについて、その機能を簡単に実装できるjQueryを使って解説します。

1時間30分 (25 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 1,990
発売日:2016年09月14日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。