如何使用JQuery的AJAX方法解析页面的特定部分？

Question

我正在尝试使用JQuery的AJAX方法解决如何解析页面的特定部分.我想做的是这样的事情:

$.ajax({
    url: "page-to-load.htm",
    dataType: "html",
    success: function (response) {
            var html= $(response);
            var content = html.find("#main");
            var title = html.find("title");
            var nav = html.find("ul.nav");
    }
});

我知道我可以使用[container] .load()加载特定的页面部分,但这将(据我所知)为我想要加载的每个页面部分创建一个请求.

在我的示例代码中,html对象似乎是一个HTML元素数组,但find()返回的每个对象都是null.搜索到的元素确实存在于目标页面中.

我错过了一些明显的东西,或者这不是JQuery可以处理的东西吗？

Answer 1

这有效。使用 .load 和特殊的 url 语法将您想要的页面部分放入临时 div 中。使用其中的内部 html 进行任何您想要的操作。

$(function(){      
  var tempDiv = $("<div />");
  tempDiv.load('index.html #target-element', function(){    
    alert(tempDiv.html());
  });
});

这是一个没有 url 语法的示例，因此您可以使用整个页面。您可以像在问题中尝试做的那样将标题拉出来......

$(function(){
  var tempDiv = $("<div />");
  tempDiv.load("page-to-load.htm", function() {
        var content = tempDiv.find("#main");
        var title = tempDiv.find("title");
        var nav = tempDiv.find("ul.nav");
  });
});