ajaxで他ページからのコンテンツを取得して表示させる
最終更新日: Update!!
ajaxはjavascriptを使った非同期通信という技術で、様々なウェブサイトで使用されています。jQueryを使うことでこのajaxも手軽に実装できるのですが、今回はajaxで他ページからのコンテンツを呼び出して表示させる便利なサンプルを作成してみたいと思います。
ページをURLで指定して、要素内にHTMLとして出力
サンプルコードと合わせてみていきたいと思います。まずは取得したいコンテンツ(=要素)があるページのURLを指定します。そして、find関数で取得する要素を取得し、その要素を変数へ格納させ、表示させたいHTMLの中の要素へappend関数で出力します。 【sample.html】※一部抜粋<body> <script> $(function(){ $.ajax({ url: 'http://example.com', // 表示させたいコンテンツがあるページURL cache: false, datatype: 'html', success: function(html) { var h = $(html).find('#hoge'); // 表示させたいコンテンツの要素を指定 $('#wrap').append(h); // append関数で指定先の要素へ出力 } }); }); </script> <div id="wrap"> <!-- ここにajaxで呼び出したコンテンツ(=要素)が出力される --> </div> </body>こうすることで、他サイトからHTMLを取得して表示することができます。またリストなどの場合は配列とfor文で表示させる内容数をコントロールすることもできます。 【sample.html】※一部抜粋
<body> <script> $(function(){ var displayAmount = 5; // 表示させる数量 $.ajax({ url: 'http://example.com', // 表示させたいコンテンツがあるページURL cache: false, datatype: 'html', success: function(html) { var h = $(html).find('#hoge ul li'); // 表示させたいコンテンツの要素を指定 for (var i = 0; i < displayAmount; i++) { $('#wrap ul').append(h[i]); // append関数で指定先の要素へ出力 } } }); }); </script> <div id="wrap"> <ul> <!-- ここにajaxで呼び出したコンテンツ(=要素)が出力される --> </ul> </div> </body>ちょっとしたテクニックですが、使える場面は結構多そうですね。HTMLのファイルサイズも短縮できますのでメリットは大きいかと思います。
sponserd
keyword search
recent posts
- GSAPでFlipプラグインを使って要素の移動やサイズ変化にトランジションのアニメーションをつける#1:基本編
GSAPでFlipプラグインを使って要素の移動やサイズ変化にトランジションのアニメーションをつける#1:基本編
- レスポンシブ対応のインラインSVGを作成する
レスポンシブ対応のインラインSVGを作成する
- webpackで画像ファイルをバンドルしてCSSで読み込む画像をBase64エンコードする
webpackで画像ファイルをバンドルしてCSSで読み込む画像をBase64エンコードする
- メディアクエリを使わないレスポンシブコーディングを試してみる #3:コンテナクエリ
メディアクエリを使わないレスポンシブコーディングを試してみる #3:コンテナクエリ
- Vue.jsでStripe決済処理用のコンポーネントを作成する
Vue.jsでStripe決済処理用のコンポーネントを作成する
- GSAPのアニメーション進捗値取得とコントロールで円形のプログレスバーを作成する
GSAPのアニメーション進捗値取得とコントロールで円形のプログレスバーを作成する
- JavaScriptで再帰関数を使ってネストした配列の深さを調べる
JavaScriptで再帰関数を使ってネストした配列の深さを調べる
- MakeShopのクリエイターモードでオリジナルデザインのECサイトを構築するときに使えるコード集
MakeShopのクリエイターモードでオリジナルデザインのECサイトを構築するときに使えるコード集
categories