jQueryのloadの基本的な書き方とコールバック関数の使い方

jQueryのloadを使うことでサーバーからページ内のhtmlを読み込み表示させることができます。

ただファイルやhtmlを読み込むだけでなくコールバック関数を使うことでhtmlの読み込みが完了してから処理を行ったりエラーが起こった時に処理をすることも可能です。

未経験でも安心!人気のプログラミングスクール

マンツーマン指導だから未経験からプログラミングが学べて高いコーディングスキルが身につく人気のテックキャンプ!

loadの基本的な書き方

loadの基本的な書き方になります。読み込みたいファイル名やパスを記述します。

jQuery('div').load('test.html');

ページ内の特定の箇所を取得したい場合にはファイル名やパス + クラス名を記述します。

jQuery('div').load('test.html #head');

コールバック

なかにはloadで読み込まれたものが表示されてから処理を行いたい場合があると思います。

そんなときはコールバック関数を使います。

コールバック関数とは

コールバック関数とは取得されたデータをロードした後に実行するものです。

コールバック関数を使う場合は下記のように記述します。

jQuery('div').load('test.html', function(response, status, xhr) {  
  処理を記述      
});

コールバック関数で取得できるもの

コールバック関数に渡されるパラメータは下記になります。

response

ファイルの内容やhtml、テキストなどを取得します。

status

ステータス(success、 error、notmodified、timeout、parsererror)を取得します。

それぞれ見ていくとsuccess(成功)、error(エラー)、notmodified(更新されない)、timeout(タイムアウト)、parsererror(パーサーエラー)になります。

つまり正常に動作したかエラーが起こったかという通信状態がわかります。

これにより正常なときやエラーが起こったときなどを判別してそれぞれ処理を行うことができます。

xhr

レスポンスデータを取得します。

先ほどのステータス以外にも404やタイムアウトなども取得することができます。

未経験でも安心!人気のプログラミングスクール

マンツーマン指導だから未経験からプログラミングが学べて高いコーディングスキルが身につく人気のテックキャンプ!

jQuery
スポンサーリンク
blogをフォローする
フロントエンジニア&コーダーのためのマテリアルブログ

コメント

タイトルとURLをコピーしました