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
- Vue.js(Composition API)+TypeScriptの環境でVuex・Vue Router・Axoisを使ってみる#1:環境構築
Vue.js(Composition API)+TypeScriptの環境でVuex・Vue Router・Axoisを使ってみる#1:環境構築
- メディアクエリを使わないレスポンシブコーディングを試してみる #1:カラムレイアウト
メディアクエリを使わないレスポンシブコーディングを試してみる #1:カラムレイアウト
- webpack+Reactの環境にTailwindCSSを導入してみる
webpack+Reactの環境にTailwindCSSを導入してみる
- Vue.js(Options API)からReactへの移行でみる違いと比較 #5:コンポーネント間で値の受け渡し(props)
Vue.js(Options API)からReactへの移行でみる違いと比較 #5:コンポーネント間で値の受け渡し(props)
- Vue.js(Options API)からReactへの移行でみる違いと比較 #4:イベントハンドリング・バインディング
Vue.js(Options API)からReactへの移行でみる違いと比較 #4:イベントハンドリング・バインディング
- Vue.js(Options API)からReactへの移行でみる違いと比較 #3:テンプレート処理
Vue.js(Options API)からReactへの移行でみる違いと比較 #3:テンプレート処理
- Vue.js(Options API)からReactへの移行でみる違いと比較 #2:メソッド・ステート
Vue.js(Options API)からReactへの移行でみる違いと比較 #2:メソッド・ステート
- Vue.js(Options API)からReactへの移行でみる違いと比較 #1:コンポーネント
Vue.js(Options API)からReactへの移行でみる違いと比較 #1:コンポーネント
categories