解释

Question

我正在尝试加载页面的正文：jQuery: Load body of page into variable。

但是，在此主题中没有人提供可行的解决方案，因为$.load()默认情况下会切断<!DOCTYPE>，<html>和<body>标记（afaik）。我选择了$.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 "[ ]"
});

Answer 1

解释

嗯..让我们看看我是否可以正确地证明这一点。

$.get()是$.ajax()的缩写。

所以当你这样做时

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

你真的这么做了

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

默认情况下，它将页面作为HTML返回。或者更确切地说，默认情况下，它首先检查页面上的MIME类型，如果没有找到，则返回HTML。如果您想告诉它您想要返回的内容，您可以在服务器页面上的MIME类型中执行此操作，也可以使用$.getJSON()

如果您希望以对象的形式从请求中返回数据，那么JSON就是您的选择。实际上，代码中唯一真正的区别是

将$.get()替换为$.getJSON()

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

或

在dataType: "json"
中添加$.ajax()
$.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() 您只需要<body>和</body>之间的文字 Here's an example

$.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's就这个问题提出了更为高级的答案。

Answer 2

jQuery将删除html和body标记。例如在Firebug中：

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

结果：

[div#id000]

并在Firebug控制台中单击它显示：

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

因此，您不需要自己查找body标记，因为剩下的唯一内容将是原始body标记内的内容。

基于评论的编辑：

可能需要事先进行一些简单的解析才能删除<head>元素。以下假设您只对<body>标记后面的内容感兴趣。

// 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);

对于loadedContent：

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

这会给出与上面相同的<div>元素，即不使用<title>标记。

Answer 3

您可以尝试以HTML格式读取HTML数据。

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

Answer 4

你试过吗？

$.get(uri, function(data) {

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

});

jQuery加载页面的主体

4 个答案:

解释

解决方案

替代解决方案