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とvivusを使ったSVGのドローアニメーション
GSAPとvivusを使ったSVGのドローアニメーション
- GSAPでScrollTriggerプラグインを使ったスクロール固定表示アニメーションの応用
GSAPでScrollTriggerプラグインを使ったスクロール固定表示アニメーションの応用
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #3
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #3
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
- ViteでReactとReact Routerを使ってみる
ViteでReactとReact Routerを使ってみる
- ViteでPugのコンパイル環境を導入する
ViteでPugのコンパイル環境を導入する
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
categories