2011-02-06 5 views
3

私はそれが可能であることを知っており、私は多くの例を見てきました。そして、私はすでに私の質問への答えを知っているのではないかと心配していますが、おそらく私は何かを逃しています。 私はこのコードがサーバーではなくローカルで実行されているため、これが機能しないと考えていました。私のbodyタグでJQueryを使用してHTMLにコードをロードしますか?

<script type="text/javascript" src="jquery-1.5.js"></script> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#test").load("test.html"); 
     }); 
</script> 

:私の頭のタグで

<div id="test"></div> 

私の外部コード(内側「test.htmlという ")

<div>This is what you should be seeing!</div> 

べきではありません。このwork? さらに、私の外部HTML文書では、すべての余分なタグを設定する必要があるので、docum次のようになります:

<html> 
    <head> 
     <title> 
     </title> 
    </head> 
    <body> 

<div>This is what you should be seeing!</div> 
</body> 
</html> 

すべてのファイルは同じディレクトリにあります。

ありがとうございました。

+1

はtest.htmlという中で、余分なHTMLタグを削除してください、それはdivを持つべきです。また、Firebugのようなデバッグツールを使用して、リクエストが行われているかどうかを確認してください。 –

+0

私はalert()でテストしたので、スクリプトが実行されていることを知っていますが、Firebugで再確認します。 – Johannes

答えて

1

あなたのコードはウェブサーバー上で動作するはずです。あなたがデスクトップからやっているのかどうか教えてください。

<script src="jquery.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
    $("#test").load("./test.html"); // also try /test.html 
    }); 
</script> 
<div id="test"></div> 
+0

ありがとうございますが、これは私のコードと本質的に同じで、同じ効果があります。 – Johannes

+0

@Jonannes正直なところあなたのコードは動作していますあなたのWebサーバーでいくつかのエラーが発生している必要があります...そして交互にロードするajaxを試すことができます –

+0

PS Gustovoのコード作業も –

1

シンプル

$.get('test.html', function(data) { 
    $('#test').html(data); 
}); 

.LOAD()loadイベントに

UPDATEイベントハンドラをバインドするために、異なる機能を持っている:データを追加するには

を追加

を試してみてください置き換えるinsted
$('body').append(data) 
+0

私は現在のスクリプトをこれに置き換えましたが、何も変わりませんでした。私は何かを置き換える代わりに代わりにそれを追加することになっていませんでしたか? – Johannes

+0

私は自分の答えを更新しました。これはあなたが欲しいものですか? –

+0

ああ、いいえ、私はコンテンツを置き換えたいですか?あなたが提供したスクリプトにスクリプトを置き換えるか、スクリプトに追加する必要があるかどうかは疑問でした。誤解をおかけして申し訳ありません。 – Johannes

0

のみターゲットに<body>のコンテンツ(または何か他のもの)を入れてURLの後に、オプションのセレクターを使用します。

// will load the contents of test.html's body-element into #test 
    $("#test").load("test.html body"); 
関連する問題