jQueryのload()でHTMLを読み込んで表示させる

  • このエントリーをはてなブックマークに追加
  • Pocket

スポンサードリンク

jQueryのload()を使えば、他のページからテキストなどを引っ張ってくることができます。

今回はコンテンツを引っ張ってくる方法、エラーの対処法や注意点などをお伝えします。

基本的な使い方

他のページからコンテンツを取得し、表示させます。

構文

jQuery

load()の引数に取得対象ページのURLと、取得したいコンテンツがあるclassを半角スペースを空けて指定しています。

それをセレクタで指定した要素に表示させます。

これだけで他のページよりコンテンツを引っ張ってくることができます。

ちなみにURLだけを指定するとそのページ全てが取得され、classの箇所はIDや要素名も指定できます。

HTML

jQuery

結果

 

当サイトの免責事項のページから、要素を引っ張って表示させました。

以下のように取得しています。

$( 取得したコンテンツを表示させる要素 ).load(‘取得するURL 取得するclass’);

サイトのヘッダーやフッターなどの共通項目をインクルードして使うなど、簡単に効率UPできます。

注意事項

load()で取得する際、以下の点にご注意ください。

  • 別のドメイン、サブドメイン、ポート、プロトコルからは取得できない。
  • 通常はGETメソッドで通信されるが、配列やオブジェクトはPOSTメソッドになる。

Ajaxと同様、セキュリティ上、他のドメインからは取得できません。

さまざまな使い方

コールバックでエラー表示

コールバックを使って、取得できなかったらエラーメッセージを表示させてみましょう。

HTML

jQuery

結果

わざと存在しないURLを指定したので、エラーメッセージが表示されるはずです。
 

通信状態のステータスも取得するためちょっと複雑ですが、以下のように動作しています。

1.ステータスも取得する

$(‘div’).load(‘/hogehoge/’, function(response, status, xhr) {

特定のURLのあとにfunction(response, status, xhr)と続いていますが、実際に取得したデータや通信状態を取得しています。

  1. response…取得したデータ(HTMLであればHTMLソース)
  2. status…通信状態
  3. xhr…レスポンスデータ(XMLHttpRequest・404やタイムアウトなどの通信状態も含めて取得)

2.ステータスがエラーだったら実行

if (status == ‘error’) {

上記2.のstatuserrorだったらエラーメッセージを表示させます。

statusは以下の5種類が返されます。

  1. success…成功
  2. error…失敗
  3. notmodified…更新されていない
  4. timeout…タイムアウト
  5. parsererror…パーサーエラー(構文エラー)

1、2はよく使うかと思います。

パーサーエラーは;(セミコロン)が抜けてたり}(カッコ)の閉じ忘れなどの構文エラーです。

参考:jQueryでのif文の書き方

3.取得したhttpステータスコードを表示させる

$(‘div’).append(msg+xhr.status+’-‘+xhr.statusText);

上記で取得したxhrの中から以下のように特定のデータを取得しappend()<div>要素に出力しています。

  • xhr.status…200や404、500などのhttpステータスコード
  • xhr.statusText…Not FoundやForbiddenなどのステータステキスト

xhrはオブジェクト形式なので、statusstatusTextといったプロパティを取得するためには、以下のようにオブジェクト名とプロパティ名を.(ドット)で繋ぐだけです。

オブジェクト名 . プロパティ名

参考:append() で子要素の最後に追加

jQueryを読み込む際のloadイベントについて

今回ご紹介しているload()メソッドとは別に、読み込みのタイミングに関するloadイベントがありますが、別物です。

以下の記事でご紹介していますので、ご確認ください。

参考:jQueryのready()やload()のタイミングの違い

スポンサードリンク

  • このエントリーをはてなブックマークに追加
  • Pocket

コメントを残す

*