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

jQuery

2021.02.102022.03.15

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) {  
  処理を記述      
});

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

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

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

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

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

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

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

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