0

据我了解，JQuery load() 函数检索文档并可以执行以下操作：

$('#somecontenttograb').html()

至此。我想知道该怎么做...本质上，我想使用 JQuery 异步下载网页，然后从中获取元素并将它们插入到我自己的文档中的不同位置。

我认为 .ajax 调用在这里很好，但我无法理解返回的对象 - 我相信传递给成功函数的参数可能会将其元素拉出，但是如何？

谢谢，

马特。

在尝试了下面两个答案中发布的代码后，我已经尝试过了，虽然我可以使用警报向我显示传递给 ajax() 调用的 url，并且如果我提醒 $(result) 会调用成功函数.find('#content') 只有 null 出现在警报中。如果我将第一个警报中的 url 放入浏览器，我会得到一个有效的页面。可能出了什么问题？

马特。

4

3 回答 3

2

更新

为了回应您对其他答案的评论，我只想确保我清楚地了解情况：

  • 您正在从本地主机进行测试，而不是从本地硬盘驱动器（这意味着您在浏览器中的 URL 包括“ http://localhost ”，而不是硬盘驱动器上的位置。
  • 当您做出 AJAX 响应时，alert(...)-ing 结果会给您 null 或等效的值。
  • 该 URL 有效，可以在您的浏览器中加载。
  • 您请求的 URL 与原始页面位于同一域中。

如果这些事情是真的，那么我会尝试以下做一些故障排除：

  1. 使用 Firefox 并安装 Firebug（我们需要它来确定 AJAX 请求是否失败以及原因）
  2. 使用Firebug 的控制台在您的代码中包含一些日志记录
  3. 使用 jQuery 的ajax(...)方法，并通过包含一些日志代码来查看发生了什么来处理失败。如果您所在的页面不需要针对失败请求的视觉响应并且您使用的是 Firebug，则您可以避免此步骤。

这是我将用于此的代码：

$.ajax({
    url: "http://stackoverflow.com/",
    success: function(html) {
        var responseDoc = $(html);
        // Output the resulting jQuery object to the console
        console.log("Response HTML: ", responseDoc);
    }
    // Handle request failure here
    error: function(){
        console.log("Failure args: ", arguments);
    }
});

如果您发布 Firebug 日志的输出，应该更容易找出问题并为您找到解决方案。Firebug 还会记录XMLHttpRequests，因此您可以准确地看到发送到服务器和从服务器发送的内容，如果它返回某种服务器错误，Firebug 将更改请求的外观（这是您可以避免我上面列出的 #3 的方法）。

您可以使用该ajax(...)方法，但使用get(...)回调会更容易，如下所示：

$.get("http://stackoverflow.com", function(html) {
    var responseDoc = $(html);
});

responseDoc将是一个 jQuery 对象，您可以使用它来提取元素并像对待任何其他 jQuery 对象一样进行处理。您可以使用jQuery 操作方法从 中提取内容responseDoc并将其添加到主文档中。

如果您需要该$.ajax(...)方法提供的额外功能，您将使用以下代码。

$.ajax({
    url: "http://stackoverflow.com/",
    success: function(html) {
        var responseDoc = $(html);
    }
    error: function(XMLHttpRequest, textStatus, errorThrown){
        // Handle errors here
    }
});
于 2009-11-07T18:55:24.640 回答
2

如果有问题的网页位于不同的服务器上，由于同源策略存在问题，您将无法使用任何 AJAX 访问返回的 html。您可以通过 AJAX 从另一台服务器获取的唯一数据类型是 JSONP。这使用脚本标签来加载数据并使用 javascript 回调对其进行操作。处理另一个站点的另一种方法是让您的服务器代理请求，即，您调用服务器上的一个方法，该方法反过来为您执行实际请求。

如果您访问的是同一台服务器，那么我建议您设置一些服务器方法以仅返回您要在页面上注入的 HTML，而不是加载和解析整个页面以获取一些元素。

于 2009-11-07T19:30:33.960 回答
0

如果您请求的 url 返回 html，您可以在其上使用选择器：

$.ajax({
    url: '/test.html',
    success: function(result) {
        // select an element that has id=someElement in the returned html
        var someElement = $(result).find('#someElement');
        // TODO: do something with the element
    }
});
于 2009-11-07T18:57:24.263 回答