使用jQuery解析完整的HTML页面

Question

使用jQuery解析完整的HTML页面

13

我使用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;

- Mark Baijens

结果可能只是一个字符串。 - hunter

你能展示一下如何将数据放入 result 中吗？另外，alert(result); 会在弹出框中显示 HTML 吗？仅仅将 HTML 值赋给变量并不能自动使 .html() 函数返回 HTML。你的 result 变量可能已经是 HTML 了。 - Josh

1

为什么不直接打印输出结果呢？这应该是文本。 - WaiLam

@Josh，已添加调用页面到帖子的功能。是的，当我执行alert(result)时，HTML会在警报框中显示。 - Mark Baijens

@WaiLam 在我使用HTML页面之前，我想做一些修改。 - Mark Baijens

4个回答

2

测试只是一个HTML字符串，因此您可以简单地执行以下操作以显示内容

alert(result);

如果你想将其绑定到一个元素上：

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

- hunter

我想要在返回值上使用一些jQuery功能。 - Mark Baijens

1

由于结果只是一个字符串，您可能需要在使用jQuery与其交互之前将其放置在页面上。 - hunter

我需要将它放在隐藏的iframe中，我想。那会很糟糕。设计一些开箱即用的解决方案可能更好。 - Mark Baijens

你是想加载HTML并完全覆盖页面上的HTML吗？如果是这样，为什么不直接导航到那个页面呢？;) - hunter

告诉我一旦HTML返回来你想要做什么，我可能能够帮助你。 - hunter

我正在使用Ajax来完成一些功能。我提供了一个非JavaScript备份版本，以支持不使用JavaScript的用户。这两种方式都调用同一个URL，因为我不想在进行修改时需要修改两次内容。我认为最好的做法是更改我的服务器端代码，检测是否为ajax调用，并根据其修改返回值。 - Mark Baijens

1

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

如果这个对你有用，请告诉我。

- halfpastfour.am

1

不行，因为我得到的HTML包含头部、正文标签甚至是文档类型。 - Mark Baijens

把它改成这样： var result = data; $("html").html(result); 看看是否可行？ - halfpastfour.am

我也想访问头元素。这个可以工作，但只适用于body元素和title元素。 - Mark Baijens

-1

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

从服务器加载数据并将返回的HTML放入匹配的元素中。

- pawel

这个回答的作者可能有点眉目。将整个HTML字符串转换为data: URL并在其上调用$.ajax()可能是唯一可靠的方法。 - Szczepan Hołyszewski

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- lrsjng · Accepted Answer

虽然时间有点久了，但也许您仍然对此感兴趣。

$(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')

希望这能帮助到你。