- ベストアンサー
html ファイルを読み込んで表示させる方法
javascript の初心者です。 HP上のfaqページで，質問事項が箇条書きされていて，どれかひとつをクリックすると，その下に回答が表示されるようにしたいと考えています。 ここまではどうにかできたのですが，ファイルの大きさや後の管理のことを考えて，回答はそれぞれ別のhtmlファイルにして，質問をクリックするとそのhtmlファイルを読み込んで表示したいのですがどのようにすればいいのでしょうか？ prototype.jsやjQueryなどのAjaxライブラリを使ったことはありませんので，もしつかうのならばできれば詳しく教えて下さい。
- km340
- お礼率78% (11/14)
- JavaScript
- 回答数6
- ありがとう数7
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
No.4のサンプルはちょっと酷いですね。参考にもならないかも。 すみません。 jQueryでAjaxを利用する基本チュートリアル http://ascii.jp/elem/000/000/458/458236/ 提示した記事をしっかり読めば、こんなミスはしないはず。 上手くやって下さい。
その他の回答 (5)
- cyokodog
- ベストアンサー率56% (13/23)
>ただ，Ajaxは文字コードがUTF-8しか使えないとのことですが，これを使いたいHPは文字コードがEUC->jpなので，文字化けしてしまいます。 >これを回避する方法はありますか？ jQuery などのライブラリで ajax関連の機能を使う場合、基本読み込み対象のページは utf-8 である必要があります。utf-8 でない場合は iframe ベースの ajax を使用することで回避できるかと思います。 こちら↓の記事の終わりの方に、$.fn.iframeAjax というメソッドの定義があるので、これを事前に定義しておき.. http://d.hatena.ne.jp/cyokodog/20090616/iframe01 html に 取得したコンテンツを格納する div 要素を以下のように書いておき.. <div id="result"></div> 下記処理を実行すればできるかと思いますが、いかかでしょう？ jQuery(function($){ var dummy = $('<a href="読み込みたいhtml">dummy</a>').appendTo('body'); dummy.iframeAjax(function(doc){ $('#result').html(doc.find('body').html()); }); setTimeout(function(){ dummy.click(); setTimeout(function(){ dummy.remove(); },100); },0); }); ちなみに私の会社でも諸事情で Shift_JISベースのhtmlしか使えない環境があるので、上記の方法と同様の原理のプラグインを作って ajax を実現させています（IE8でも動いてます）
お礼
回答をありがとうございます。 現状は一応解決しておりますが，今後の参考にさせていただきます。
- my--
- ベストアンサー率89% (91/102)
Ajax関連記事を参考に書いた簡単なサンプルです。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>Ajax sample</title> <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript"> $(function(){ $("#question1 button").click(function(){ $("#p1").load("answer1.html p").css('visibility', 'visible'); }); $('#question2 button').click(function(){ $('#p2').load('answer2.html p').css('visibility', 'visible'); }); $('#question3 button').click(function(){ $('#p3').load('answer3.html p').css('visibility', 'visible'); }); }); document.write('<style type="text/css">' + '.answer { visibility: hidden; }' + 'div button { visibility: visible; }' + '</style>'); </script> <style type="text/css"> button { visibility: hidden; } </style> </head> <body> <div id="question1">question1... <button>回答</button></div> <p id="p1" class="answer"><a href="answer1.html">回答1</a></p> <div id="question2">question2... <button>回答</button></div> <p id="p2" class="answer"><a href="answer2.html">回答2</a></p> <div id="question3">question3... <button>回答</button></div> <p id="p3" class="answer"><a href="answer3.html">回答3</a></p> </body> </html> answer1.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Ajax test</title> </head> <body> <p>回答1</p> </body> </html> 参考にしたAjax関連記事です。詳細はこちらで。 jQueryでAjaxを利用する基本チュートリアル http://ascii.jp/elem/000/000/458/458236/
- yuki4499
- ベストアンサー率62% (10/16)
Ajaxを使いというのなら下記のページでお勉強すればいいんじゃないですかね。 初級のSTEP13.14あたりがやりたいことと一致すると思われますが。 http://ajax.pgtop.net/category/4229716-1.html >>prototype.jsやjQueryなどのAjaxライブラリを使ったことはありませんので，もしつかうのならばできれば詳しく教えて下さい。 Ajaxの際には主にブラウザ間の実相の違いを吸収してくれるものなので、無理に使おうとしなくても慣れないうちはお決まりの文を書けばいい、程度に思っていればいいんじゃないでしょうか。 今は分からなくてもプログラムを書いていればすぐに理解できると思います。 Ajaxについては同じサイトの初級のステップ9.10あたりに書いてありますね。
お礼
回答ありがとうございます。 教えていただいたwebページがメンテナンス中で見ることができなかったため，確認ができず御礼を書くのが遅れてしまい申し訳ありませんでした。 このページを読んで勉強してみようと思います。
- yambejp
- ベストアンサー率51% (3827/7415)
よくよく考えたら、普通にhtmlでやるのが手っ取り早いのでは？ <a href="0001.htm">回答1</a> <a href="0002.htm">回答2</a> <a href="0003.htm">回答3</a>
お礼
ありがとうございます。 いろいろ試してみようと思います。
- yambejp
- ベストアンサー率51% (3827/7415)
＞回答はそれぞれ別のhtmlファイルにして，質問をクリックするとそのhtmlファイルを読み込んで表示したい 無理に非同期処理を使う必要はありません。 hoge.php?id=xxx のように再帰的な処理をいれて、そのidのページを includeしてやればいいでしょう。
補足
回答をありがとうございます。 せっかく教えていただいたのですが，PHPは勉強したことがなく使えませんので，できればjavascriptかhtmlでできる方法を教えて下さい。 よろしくお願いします。
お礼
ありがとうございます。 少しわかってきた気がします。 ただ，Ajaxは文字コードがUTF-8しか使えないとのことですが，これを使いたいHPは文字コードがEUC-jpなので，文字化けしてしまいます。 これを回避する方法はありますか？ もしご存知でしたら教えて下さい。 よろしくお願します。
補足
お礼のところに書いた文字コードの件は解決しました。 がんばってみます。 ありがとうございました。