jQuery .ajax() html 响应。查找 <正文>答案

【问题标题】：jQuery .ajax() html response. Find <body>jQuery .ajax() html 响应。查找 <正文>
【发布时间】：2013-08-15 18:23:43
【问题描述】：

我有一个 .ajax 调用，它通过 post 请求加载一个 url，就像 .load() 一样。我正在阅读 responseText 以获取有效的 HTML。然后我想获取和我自己的#content id。

标题用于替换页面的标题。 #content 是要在页面上替换的内容，我需要 class 属性的 body 标记，因为它们是我要加载的每个页面的特定类。

    $.ajax({
    url: url,
    type: 'POST',
    data: {},
    complete: function (result) {

        var html = $('<div>' + result.responseText + '</div>'),
            title = html.filter('title:first').text(),
            b = html.find('body'),
            inner = html.find('#content').html();

        console.log(b);

        //change document title
        document.title = title;

        //add new content
        wrap.html(inner);

        //for home page
        $(window).trigger('resize');

        //fade in
        wrap.fadeIn(500, function () {

            wrap.trigger('newpage');
            $('#wrap').css('min-height', '100%');

        });

    }
});

假设 wrap 已定义。请。这里的问题是，我无法检索正文以阅读课程。它总是返回未定义的。我也尝试过使用 .filter() 而不是 .find()，但没有成功。

有什么想法吗？

【问题讨论】：

jQuery 不解析 html 和 body 元素，解析后的响应包含 body 元素的 html 内容。
Retrieving text from the <title> element from the <head> in an ajax response 的可能重复项
如果是这种情况，为什么我能够检索到标签内容？

标签： jquery html ajax

【解决方案1】：

每个文档只能有一个<body>标签，通常浏览器会从html中去除这些标签。

您可以在 Chrome 调试器中输入以下内容进行测试：

$('<div><head></head><body>Example Text</body></div>');

将返回：

[<div>Example Text</div>]

这在JQuery API中有记录

在传递复杂的 HTML 时，某些浏览器可能无法生成完全复制所提供的 HTML 源的 DOM。如前所述，jQuery 使用浏览器的 .innerHTML 属性来解析传递的 HTML 并将其插入到当前文档中。在此过程中，一些浏览器会过滤掉某些元素，例如 <html>、<title> 或 <head> 元素.因此，插入的元素可能不代表传递的原始字符串。

【讨论】：

我已阅读此内容。但是，我能够检索标记的内容。此外，如果我将 .ajax() 调用返回的原始数据记录到控制台，整个 HTML 文档都在那里，包括和标签。
是的，但只要您要求 JQuery 解析 HTML，浏览器就会删除这些标签。这不是有史以来最优雅的解决方案，但您可能需要对一些字符串操作进行硬编码才能找到您要查找的内容。
我实际上已经这样做了，但我仍然很好奇。如果您在我的代码中注意到，我在访问标记之前解析了 HTML，但它仍然有效???
是的，刚刚在 Chrome 的调试器中做了一个快速测试。这可能是特定于浏览器的，但 Chrome 似乎没有去除 <title> 标记。不过，我不会指望所有浏览器都以相同的方式行事。
很高兴您找到了解决方法 =)。有人还在这里发布了一个不错的 javascript 正则表达式解决方案，如果您仍然需要它，可以从字符串中解析标签。 stackoverflow.com/questions/288277/…

【解决方案2】：

您可以尝试在 body 中使用内部元素。这就是我的策略。我在 body 中创建了一个 phantom div 并在 ajax 调用中调用它。

希望它对你有用。

【讨论】：