React.js入門

jQuery.ajax()メソッドに設定項目を追加する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
jQuery.ajax()メソッドに引数で渡すオブジェクトの設定項目を追加します。
講師:
04:02

字幕

このレッスンでは jQuery のajax メソッドに渡すオブジェクトに設定項目を幾つか追加してみたいと思います。CommentBox のconponentDidMount と最初に呼びだされる準備が整った時に呼び出されるメソッドの中で jQuery のajax メソッドを呼び出しています。ここでは url、dataType、success 3つなんですがちょっとこれでは寂しいです。もう少し追加したほうが良いと思いますので追加してみたいと思います。その前に現在どんな状況になっているかというとcomments.json とこういうファイルがあるんですがこのデータを ajax を読み込んでページに差し込むという作業をしています。ローカルサーバーで HTML ドキュメントsample.html を開くとこの様に ajax でjson から読み込んだデータが2件表示されています。ajax メソッドの呼び出しに設定項目として今回あと2つ追加したいと思います。1つはここに入れましょうか。cache です。cache を false とします。読み込んだデータを cache してしまうとデータが更新された時になかなか反映されないということになりますね。 ですから、読み込んだデータはcache しないということにします。それからもう1つ、これはうまくいってる時には問題ないですけどうまく行かなかったとき困ってしまいますよね。ですから、エラーの処理も加えておいた方がよいでしょう。ここでは、またカンマ区切りにしてerror です。形は success の場合と一緒ですので中括弧始まり、中括弧閉じとこの後プロパティはないのでカンマは入れません。実際には引数がありましてその引数を貰うといろいろとデータが取り出せるんですがここはとりあえずエラーが起こったということだけでもせめて示したいと思います。そこで、console.error とします。何を出すかというと、そうですねurl を頼りにしてますのでこれ大丈夫だろうか、ということでurl を console の error で表示することにします。実際に監視する時にはこの引数を調べて必要な情報をここに加えるということにすると良いでしょう。error のメソッド、こちらについてもthis を参照にしていますからbind しておかないといけませんね。ではこれをコピーしてfunction の後に.bind(this) ということで付け加えます。 これで保存しましょう。ローカルサーバーでHTML ドキュメントをリロードします。もちろん何も問題がなければ表示は変わらないということになります。念のためコンソール見ておきましょうか。「表示」>「開発/管理」>「デベロッパーツール」「JavaScript コンソール」でいいですね。特にエラーは出ていません。このレッスンでは jQuery のajax のメソッドに渡すオブジェクトその設定項目を2つ追加しました。1つは cache です。読み込んだデータを cache しないということで false の設定にしました。もう1つは、エラーが起こった場合のerror のメソッドです。今回はプロパティからurl を調べるということでprops.urlそれから this 参照していますのでbind.this これも忘れないようにしましょう。

React.js入門

React.jsはFacebookが開発したJavaScriptライブラリです。このコースではReact.jsで定めた要素をHTMLドキュメントに差し込むことから始まり、JSONファイルから複数のデータを読み込んでリストを作ったり、サーバーとデータをやり取りするなど段階を踏みながらひとつのWebアプリを作りあげます。

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

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

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

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