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

一尘不染

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

ajax

我希望page.html能够对side.html的内容进行ajax请求，并提取其两个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（）产生了undefined，undefined和[object
Object]。我究竟做错了什么？例子在这里。

阅读 656

2020-07-26

共1个答案

一尘不染

您需要更改此行：

html = jQuery(result);

对此：

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

实际上，更好的是，您应该将此声明为局部变量：

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

说明

当您这样做时jQuery(result)，jQuery拉出<body>元素的子元素并返回围绕这些元素的包装器，而不是返回该<html>元素的jQuery包装器，我倾向于认为这是相当愚蠢的。

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

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

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

如果您<div id="a">不在最高级别，即的直接子级<body>，则您的代码可以正常工作。对我来说，这是不一致的，因此是错误的行为。为了解决这个问题，jQuery
<div>在工作<body>内容提取魔术时应该为您生成容器。

2020-07-26