【问题标题】:Select content from JQuery ajax return object从 JQuery ajax 返回对象中选择内容
【发布时间】:2009-11-07 18:44:52
【问题描述】:

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

$('#somecontenttograb').html()

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

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

谢谢,

马特。

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

马特。

【问题讨论】:

    标签: jquery ajax load element


    【解决方案1】:

    更新

    针对您在其他答案中留下的 cmets,我只想确保我清楚地了解情况:

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

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

    1. 使用 Firefox 并安装 Firebug(我们将需要它来确定 AJAX 请求是否失败以及原因)
    2. 使用Firebug's console 在您的代码中包含some logging
    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 manipulation 方法从responseDoc 中提取内容并将其添加到您的主文档中。

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

    $.ajax({
        url: "http://stackoverflow.com/",
        success: function(html) {
            var responseDoc = $(html);
        }
        error: function(XMLHttpRequest, textStatus, errorThrown){
            // Handle errors here
        }
    });
    

    【讨论】:

      【解决方案2】:

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

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

      【讨论】:

      • 澄清一下,我正在访问的所有页面都在我自己的服务器上(目前是开发箱)。包装我希望下载和插入的元素的唯一内容是标准 和 标签,例如。我了解您的意思是,即使是那些也应该被删除,以便我要插入的内容是页面上唯一的内容,但我想打一个电话并取回我可以用 javascript 分解的内容,并且在不同的地方插入,以提高效率。
      【解决方案3】:

      如果您请求的 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
          }
      });
      

      【讨论】:

      • 请参阅我关于未从 find() 调用中收到有效返回的编辑。
      • 我已经用一个纯 html 文档尝试了您的代码示例,该文档仅包含一个 id='someElement' 的 div,除了 null 或 object [Object] 之外,它无法发出任何警报。您能否添加一些内容来解释如何使用 find() 调用返回的对象?
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-10-24
      • 1970-01-01
      • 2018-09-21
      • 1970-01-01
      • 1970-01-01
      • 2011-06-09
      相关资源
      最近更新 更多