Question

我遇到了一个独特的问题。我正在使用jQuery进行简单的ajax调用来获取html文件的内容。

$.ajax({
  url: "foo.html",
  dataType: "html",
  success: function(data){
    console.log(data);
  }
});

foo.html是一个简单的html文件，其中包含一个名为#mainContainer的主div。我想要做的就是从mainContainer获取所有内容并将它们存储在var中，这样我就可以将它们添加到我页面中的另一个div中。

这是index.html（正在进行通话的文件）。

这是foo.html（我试图调用和解析的文件）。

Answer 1

jQuery“.load（）”API完全符合您的要求：

$('#the_target_div').load("foo.html #mainContent", function() {
  // stuff to do when content is ready
});

您只需在URL后面添加一个选择器字符串，用空格分隔。

有一点需要注意：如果加载的页面中包含任何重要的JavaScript（在<script>标记中），则以这种方式加载页面时脚本将不会运行。如果您需要这种行为，那么您必须自己提取内容（这是一个小问题），或者让您的服务器完成工作并仅使用您需要的片段进行响应。

一种完全不同的方法是将您的网页加载到隐藏的<iframe>中，然后深入该DOM以找到您想要的内容。然后可以将其复制到主页面中。

Answer 2

var mainContainerInnerHtml = $（data）.find（“＃mainContainer）.html（）;

Answer 3

你不需要得到dom元素。您可以使用查询replaceWith函数来替换。

就像这样：

$("#data").replaceWith($("#data",ajaxReturnHtml)).serialize();

对我有用。