2011-12-30 19 views
3

ここではページのボディをロードしようとしています:jQuery: Load body of page into variableページのjQueryロード本体

しかし、このスレッドで誰が作業溶液を提供しないため、デフォルトで<!DOCTYPE><html><body>タグオフ$.load()カット(私の知る限り)。私は$.get()メソッドを選択しましたが、すでにページ全体のコンテンツを文字列として取得していますが、今は<body>タグ(または、<body>タグ内のもの)を取得できません。

は、これまで私が試してみました:

$.get(uri, function(data){ 
console.log(data); // --> the entire page's content is logged 
}); 

$.get(uri, function(data){ 
console.log($(data)); // --> i guess that's the entire site as an object 
}); 

$.get(uri, function(data){ 
console.log($(data).find("body")); // --> this should be the <body> tag as an object, but console just outputs "[ ]" 
}); 
+0

質問にインラインHTMLタグを含めることはできません。ティルダキーと共有する一重引用符で囲むことはできません。 – mrtsherman

+0

@mrtsherman:これは「バックティック」と呼ばれています。 –

+1

どこに配置されているかは、キーボードレイアウトによって異なります。 – ThiefMaster

答えて

4

説明

フム..私はこれを適切に発揮できるかどうかを見てみましょう。

$.get()は、$.ajax()の略です。

あなたはあなたが本当に

$.ajax({ 
    url: uri, 
    type: "GET", 
    success: function(msg){ 
     console.log(msg); 
    } 
}); 

、デフォルトでは、これをこの

$.get(uri, function(data){ 
    console.log(data); // --> the entire page's content is logged 
}); 

やってないときだから、それはHTMLとしてページを返します。代わりに、デフォルトではページのMIMEタイプを最初にチェックし、見つからない場合はHTMLを返します。返信したいものを伝えたい場合は、サーバーページのMIMEタイプで行うか、または使用することができます。$.getJSON()

あなたの要求から返されたデータをオブジェクト、JSONは行く方法です。 コードの唯一の本当の違いは、本当に、

  • がにdataType: "json"を追加するには、$.get()$.getJSON()

    $.getJSON(uri, function(data){ 
        console.log(JSON.stringify(data)); 
    }); 
    

または

  • と交換しています

    $.ajax({ 
        url: uri, 
        type: "GET", 
        dataType: "json", 
        success: function(data){ 
         console.log(JSON.stringify(data)); 
        } 
    }); 
    

ので、JSONデータがページから返されることを期待することができます。

今あなたがする必要があるすべては、これはあなたが要求から返されたオブジェクトをしたい場合は移動するための方法であるjson_encode()

$output = array(
    "msg" => "This is output", 
    "data" => array(
     "info" => "Spaaaace", 
     "cake" => "no" 
    ), 
    array(
     "foo", 
     "bar" 
    ) 
); 
echo json_encode($output); 
//it will look like this before the text is parsed into JSON in Javascript 
//{"msg":"This is output","data":{"info":"Spaaaace","cake":"no"},"0":["foo","bar"]} 

を使用して、サーバー側でデータを準備しています。


ソリューション

別にjson_encode()とサーバー側の修正から、これが解決策です。

$.getJSON(uri, function(data){ 
    console.log(JSON.stringify(data)); 
}); 

代替ソリューション

必要なのは、上のより高度な答え

$.get(uri, function(msg){ 
    var startWith = "<body>", 
     endWith = "</body>"; 
    var iStart = msg.search(startWith); 
    var iEnd = msg.search(endWith); 

    msg= msg.substring(iStart+startWith.length, iEnd) 
    console.log(msg); 
}); 

そしてhere'sHere's an example <body>間と</body>テキストである、あなたの$.get() を維持したいと仮定すると、それです。

+0

wowありがとうございました。この詳細な回答の多くは、動作しません!:)(悲しいことに私はあなたが私がより多くの評判を必要とする原因を投票することができません:S) – Peter

+0

@ user1122856問題はありません。私は助けるためにここにいる! :) – ShadowScripter

0

をあなたが代わりにXMLとしてHTMLデータを読み込む試すことができます。

$.get(uri, function(data){ 
    console.log($(data).find("body")); 
}, 'xml'); 
+0

そこに記録され、何も:(しかし、あなたの助けに感謝しません;) – Peter

1

jQueryがhtmlbodyタグをトリミングします。

[div#id000]

とFirebugのコンソールでこれを示していることをクリック:

<div id="id000"> 
    <div id="id001">content</div> 
</div> 

だから、あなたが必要とするべきではないのFirebug例えば:中

$("<html><body><div id=id000><div id=id001>content</div></div></body></html>")

結果残っている唯一のコンテンツは元ののものであるため、bodyタグをご自身で見つけてくださいタグ。たぶん、いくつかの簡単な構文解析が<head>要素を削除するために事前に必要です

:COMMENTに基づく

EDIT。以下は、<body>タグに続くコンテンツにのみ関心があると仮定しています。 loadedContentため

// try and find the body start tag 
var match = /<body/gi.exec(loadedContent); 
if (match.length > 0) { 
    // if found, trim the loadedContent 
    loadedContent = loadedContent.substring(match.index); 
} 
// jQuery will do the rest 
var $content = $(loadedContent); 

として:

<html><head><title>title</title></head><body><div id=id000><div id=id001>content</div></div></body></html> 

これは即ち<title>タグを使用しない場合、上記と同様<div>要素を与えます。

+0

はちょうどタグ - >ロードされたコンテンツは、次のように見える場合: [私は再びロードすることにしたいいけないコード] ... – Peter

0

試しましたか?

$.get(uri, function(data) { 

    console.log('<body>' + data.contents().find('html body').html() + '</body>'); 

}); 
+0

は動作しません(何も記録されていませんが、提案に感謝します;) – Peter

関連する問題