2013-09-21 5 views
22

私は新しいページを読み込むためにjQueryのajaxコードを使用していますが、divのhtmlだけを取得したかったのです。jQuery ajaxを使って別のページのdivのhtmlを取得する方法は?

私のコードは: HTML:

<body> 
    <div id="content"></div> 
</body> 

スクリプト:

$.ajax({ 
    url:href, 
    type:'GET', 
    success: function(data){ 
     $('#content').html(data); 
    } 
}); 

私は彼が別のページに$( 'のdiv#コンテンツ')のHTMLのみを取得したいです。どうやってするの?

答えて

1

あなたは本当にAJAXリクエストがファイル全体を取得し、それを行うことはできませんが、それが取り出されます一度、あなたはコンテンツをフィルタリングすることができます:find()としてダミー素子の使用は子孫のみで動作します

$.ajax({ 
    url:href, 
    type:'GET', 
    success: function(data) { 
     var content = $('<div>').append(data).find('#content'); 
     $('#content').html(content); 
    } 
}); 

注意、ルート要素を見つけることはありません。

やjQueryのはあなたのためにそれをフィルタリングしてみましょう:

$('#content').load(href + ' #IDofDivToFind'); 

それが動作しませんように私は、これはクロスドメインリクエストではありません同じドメインのページのみを想定しています。

+0

はい、私はこの方法ではなく、右のフィルターを試してみました。 –

36

[OK]をクリックすると、htmlを「構築」し、.content divを見つける必要があります。このような

$.ajax({ 
    url:href, 
    type:'GET', 
    success: function(data){ 
     $('#content').html($(data).find('#content').html()); 
    } 
}); 

シンプル!

+0

これを行わないと、他のページからスクリプトが実行される可能性があります。それはあなたには影響しない奇妙な問題ですが、スクリプトを削除する.loadを使用することをお勧めします。 Ala 'var loadHolder = $( '

'); loadHolder.load($( '#content')。loadHolder.find( '#content').html()) }) ' – Shadaez

20

あなたはjQueryのを.LOAD()メソッドを使用することができます:あなたは別のドメインからのコンテンツを探しているなら、これはトリックを行います

http://api.jquery.com/load/

$("#content").load("ajax/test.html div#content"); 
+0

パーフェクト!相対的な '../'や絶対的な 'http:// example.com /'の代わりにルートリンク '/'が与えられているイメージを正しく読み込む方法はありますか?基本的に、イメージを別のサイトに読み込むにはどうしたらいいですか? – fredsbend

11

を:

$.ajax({ 
    url:'http://www.corsproxy.com/' + 
     'en.wikipedia.org/wiki/Briarcliff_Manor,_New_York', 
     type:'GET', 
     success: function(data){ 
      $('#content').html($(data).find('#firstHeading').html()); 
     } 
}); 
+0

ねえ、ブライアクリフです! :D私はホワイトプレーンズからです – Sticky

+0

これを行うと、他のページからスクリプトが実行される可能性があります - あなたには影響しないかもしれない奇妙な問題ですが、 – Shadaez

2
$.ajax({ 
    url:href, 
    type:'get', 
    success: function(data){ 
    console.log($(data)); 
    } 
}); 

このコンソールログはオブジェクトのような配列を取得します:[meta、title、]、非常に奇妙な

あなたはJavaScriptを使用することができます。

var doc = document.documentElement.cloneNode() 
doc.innerHTML = data 
$content = $(doc.querySelector('#content'))