使用 jquery 解析完整的 html 页面答案

【问题标题】：Parse complete html page with jquery使用 jquery 解析完整的 html 页面
【发布时间】：2010-12-13 14:35:43
【问题描述】：

我用 ajax 加载了一个 html。我想将结果加载到 jquery 对象中。我试过了，但它返回null。我怎样才能做到这一点？我得到了一个完整的页面，包括 doctype、head 元素和 body 元素。

var test = $(result); //result contains html code
alert(test.html()); //returns null

我用这个函数加载数据。

function ajaxLoadContent(element) {
    $.ajax({
        url: "url to the page",
        type: "GET",
        timeout: 5000,
        datattype: "html",
        success: function(result) {
        //handler
        },
    });
    return false;

【问题讨论】：

result 可能只是一个字符串
您能说明如何将数据输入result 吗？另外，alert(result); 是否在警报中显示 html？只是将 html 转储到这样的变量中不会自动使 .html() 函数返回 html。您的结果变量可能已经是 html。
为什么不直接打印结果呢？这应该是文本。
@Josh，将调用页面的功能添加到帖子中。是的，当我执行alert(result) 时，警报中会显示 html。
@WaiLam 我想在我的页面上使用 html 之前做一些修改。

标签： javascript jquery ajax

【解决方案1】：

这是很久以前的事了，但也许你仍然对它感兴趣..

$(String) 的实习生实现无法构建包含 head 或 body 标记的 jQuery 对象。它会简单地忽略它们并将所有元素向上移动。

所以如果你的字符串是例如

<html>
  <head>
    <meta ...>
  </head>
  <body>
    <div id="a"/>
  </body>
</html>

生成的 jQuery 对象将是一个包含两个元素的数组

[<meta ...>, <div id="a" />]

要获得一个类似body 的 jQuery 对象，在将其传递给 jQuery 之前剪切除正文内容之外的所有内容：

body = '<div id="body-mock">' + html.replace(/^[\s\S]*<body.*?>|<\/body>[\s\S]*$/ig, '') + '</div>';
var $body = $(body);

现在事情按预期工作了..例如

$body.find('#a')

希望对您有所帮助..

【讨论】：

为什么这个答案没有被接受？让我免于头疼。谢谢！
为什么jquery不能解析头部和身体？
救命稻草！谢谢！！

【解决方案2】：

test 只是一个 html 字符串，所以你可以简单地这样做来显示内容

alert(result);

如果你想把它绑定到一个元素上

$("#myDiv").html(result);

【讨论】：

我希望能够在返回值上使用一些 jquery 功能。
因为 result 只是一个字符串，您可能需要将其放在页面上，然后才能与 jQuery 进行交互。
Mzz 我猜我需要将它放在隐藏的 iframe 中。那会很讨厌。设计一些开箱即用的解决方案可能会更好。
您是否尝试加载 html 并完全覆盖页面上的 html？如果是这样，您为什么不直接导航到该页面？ ;)
让我知道您想在 HTML 恢复后如何处理它，我或许可以为您提供帮助

【解决方案3】：

function ajaxLoadContent(element) {
$.ajax({
    url: "url to the page",
    type: "GET",
    timeout: 5000,
    datattype: "html",
    success: function(data) {
     var result = $(data);
    },
});
return false;

您现在应该可以像这样调用结果了（记住它还没有添加到 DOM 中）：

alert(result.html());

添加到 DOM

result.appendTo("body");

让我知道这是否适合你。

【讨论】：

不，这不起作用，因为我得到的 html 包含 head、body 标签甚至是 doctype。
ok 改成：var result = data; $("html").html(结果);让我知道它是否有效？
我也可以访问头部元素。这项工作仅适用于正文元素和标题元素。

【解决方案4】：

试试jQuery对象的load方法：http://api.jquery.com/load/

从服务器加载数据并放置返回的 HTML 到匹配的元素。

【讨论】：

这个答案的作者可能会有所作为。将整个 HTML 字符串转换为 data: url 并在其上调用 $.ajax() 可能只是唯一可靠的方法。