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");
  });
});

Answer 2

实际上，在这里的另一个问题的答案中发现了一个问题：Why does this jQuery fail to load/parse my HTML string?

来自文档：

HTML字符串不能包含   一个无效的元素   div，例如html，head，body或   标题要素。

如果您要提取完整的HTML   文件，然后你会有很多   可能不会出现在div中的元素。

于2009年9月18日11:53 David Dorward回答

看起来可能不可能。荡。

Answer 3

我当然不会称之为不可能。

首先想到的解决方案就是做这样的事情：

1）在打开之后和关闭<body>标记之前，在输出中插入HTML注释。这些注释应包含唯一的字符串，以便您可以搜索它;为此目的而生成的指导将是一个不错的选择。例如：

<!DOCTYPE
blah blah
...
<body>
<!-- BODY: 3F2504E0-4F89-11D3-9A0C-0305E82C3301 -->
...
<!-- BODY: 3F2504E0-4F89-11D3-9A0C-0305E82C3301 -->
</body>

2）收到回复后，搜索的两个实例。修剪字符串，以便删除第一个实例之前和第二个实例之后的所有内容。

3）您现在有一个字符串，其中只包含<div>内的合法元素。

此方法的缺点是您无法访问<body>之外的元素，例如<title>（因为您提到它）。你必须找到传递这些信息的另一种方式;有很多方法可以解决这个问题，所以选择你的毒药。

更新（备注）：

此解决方案要求您可以修改page-to-load.html生成的HTML（换句话说，它必须是您拥有的代码）。如果不是这种情况，那么可能会自己搜索<body>和</body>，但这会开始容易出错（parsing HTML with regular expressions）。
显然，唯一的字符串（例如上面的guid）将被选择一次并永久使用而无需修改。重点是你需要知道要搜索的内容。

Answer 4

除了您所说的内容之外，.find()文档上的注释表明，如果HTML是当前页面上DOM的一部分，则只能执行此操作。这告诉我，如果你把所有这些数据都粘贴到一个隐藏的div然后尝试调用find，你就会得到你想要的结果。

Answer 5

你可以进行拆分，然后在将它添加到jquery对象之前替换一些字符串。

$.ajax({
url: "file.html",
dataType: "html",
success: function (response) {            
    var resp = response.split('<body>');
    resp = resp[1].split('</body>');
    resp = resp[0].toString();
    var html = $('<div>'+resp+'</div>');
    var div = html.find('div');
    var ul = html.find('ul');
    var foot = html.find('footer');
    console.log(resp, html, div, ul, foot);
    ul.appendTo('body');
 }});

使用给定的HTML：

<!DOCTYPE html>
 <html>
<head>
    <title></title>
</head>
<body>
<div>Something that we're gonna get</div>
<ul>

  <li>List item</li>
</ul>
<footer>Good foot</footer>
</body>
</html>

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

5 个答案: