Question

我想将page.html用于ajax请求side.html的内容并提取其两个div的内容。但是我无法找到解析响应的正确方法，尽管我尝试了一切。

这是side.html：

<!DOCTYPE html>
<html>
<head>
<title>Useless</title>
</head>
<body>
<div id="a">ContentA</div>
<div id="b">ContentB</div>
</body>
</html>

，这是page.html

<!DOCTYPE html>
<html>
<head>
<title>Useless</title>
<script type='text/javascript' src='jquery-1.9.0.min.js'></script>
</head>
<body>
Hello
<script type="text/javascript">
jQuery.ajax({
        url: "side.html",
        success: function(result) {
            html = jQuery(result);

            alert(html.find("div#a").attr("id"));
            alert(html.find("div#a").html());
            alert(html.find("div#a"));

        },
    });
</script>
</body>
</html>

当我访问此页面时，我没有收到任何错误，并且三个alert（）s产生undefined，undefined和[object Object]。我究竟做错了什么？示例是实时here。

Answer 1

您需要更改此行：

html = jQuery(result);

对此：

html = jQuery('<div>').html(result);

实际上，你应该将它声明为局部变量：

var html = jQuery('<div>').html(result);

<强>解释

执行jQuery(result)时，jQuery会拉取<body>元素的子元素并返回这些元素的包装，而不是返回<html>元素的jQuery包装器，倾向于同意会非常愚蠢。

在您的情况下，sidebar.html的<body>包含多个元素和一些文本节点。因此，返回的jQuery对象是这几个元素和文本节点的包装器。

当您使用.find()时，它会搜索您调用它的jQuery对象包装的元素的后代。在您的情况下，<div id="a"> 不其中之一，因为它实际上是包装器的所选元素中的一个，并且不能是其自身的后代。

通过将其包裹在您自己的<div>中，然后将这些元素“向下”推到一个级别。当您在我上面的固定代码中致电.find()时，它会查找<div>的后代，从而找到您的<div id="a">。

<强>注释

如果您的<div id="a">不在顶层，即<body>的直接孩子，那么您的代码就可以了。对我来说，这是不一致的，因此行为不正确。要解决这个问题，jQuery应该为它生成容器<div>，当它处理<body>内容提取魔法时。

Answer 2

试试这个：

$.get(url,function(content) {
    var content = $(content).find('div.contentWrapper').html();
    ...
}

使用jQuery Ajax获取另一个页面div的内容

2 个答案: