html ファイルを読み込んで表示させる方法

解決済

質問者：km340
質問日時：2010/02/22 14:25
回答数：6件

javascript の初心者です。
HP上のfaqページで，質問事項が箇条書きされていて，どれかひとつをクリックすると，その下に回答が表示されるようにしたいと考えています。
ここまではどうにかできたのですが，ファイルの大きさや後の管理のことを考えて，回答はそれぞれ別のhtmlファイルにして，質問をクリックするとそのhtmlファイルを読み込んで表示したいのですがどのようにすればいいのでしょうか？
prototype.jsやjQueryなどのAjaxライブラリを使ったことはありませんので，もしつかうのならばできれば詳しく教えて下さい。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (6件)

ベストアンサー優先
最新から表示
回答順に表示

No.5ベストアンサー

回答者： my--
回答日時：2010/02/22 20:49

No.4のサンプルはちょっと酷いですね。

参考にもならないかも。
すみません。

jQueryでAjaxを利用する基本チュートリアル
http://ascii.jp/elem/000/000/458/458236/

提示した記事をしっかり読めば、こんなミスはしないはず。
上手くやって下さい。

この回答への補足

お礼のところに書いた文字コードの件は解決しました。
がんばってみます。
ありがとうございました。

補足日時：2010/02/23 16:31

通報する

- 0
- 件

通報する

この回答へのお礼

ありがとうございます。
少しわかってきた気がします。
ただ，Ajaxは文字コードがUTF-8しか使えないとのことですが，これを使いたいHPは文字コードがEUC-jpなので，文字化けしてしまいます。
これを回避する方法はありますか？
もしご存知でしたら教えて下さい。
よろしくお願します。

通報する

お礼日時：2010/02/23 14:56

No.6

回答者： cyokodog
回答日時：2010/02/23 19:10

>ただ，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でも動いてます）

参考URL：http://d.hatena.ne.jp/cyokodog/20090616/iframe01

- 0
- 件

通報する

この回答へのお礼

回答をありがとうございます。
現状は一応解決しておりますが，今後の参考にさせていただきます。

通報する

お礼日時：2010/02/24 22:14

No.4

回答者： my--
回答日時：2010/02/22 17:43

Ajax関連記事を参考に書いた簡単なサンプルです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<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-transitio …
<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/

- 0
- 件

通報する

No.3

回答者： yuki4499
回答日時：2010/02/22 17:36

Ajaxを使いというのなら下記のページでお勉強すればいいんじゃないですかね。

初級のSTEP13.14あたりがやりたいことと一致すると思われますが。
http://ajax.pgtop.net/category/4229716-1.html

>>prototype.jsやjQueryなどのAjaxライブラリを使ったことはありませんので，もしつかうのならばできれば詳しく教えて下さい。

Ajaxの際には主にブラウザ間の実相の違いを吸収してくれるものなので、無理に使おうとしなくても慣れないうちはお決まりの文を書けばいい、程度に思っていればいいんじゃないでしょうか。
今は分からなくてもプログラムを書いていればすぐに理解できると思います。
Ajaxについては同じサイトの初級のステップ9.10あたりに書いてありますね。