使用 jQuery / ajax 从外部站点获取特定元素

Question

我正在使用 jQuery 和 this plugin 从外部站点提取内容。

使用以下代码效果很好：

$.ajax({
       url: 'http://www.somesite.com/',
       type: 'GET',
       success: function(res) {
          $("#here").html(res.responseText);
       }
     });

但我真正想做的只是从目标站点中提取一个部分（div），我知道这只有在使用load() 方法时才有可能，而不是GET。

然后我找到了 this code ，但是当我尝试将其构建到代码中时，它似乎不起作用，因此：

$.ajax({
       url: 'http://www.somesite.com/',
       type: 'GET',
       success: function(res) {
          $(res).find('div.content').each(function(){
              $('#here').append($(this).html());
         });

       }
     });

在 Firebug 上查看请求，请求似乎成功，但代码似乎在目标站点上找不到以下标记：<div class="content row">。

我是否需要确保目标元素有一个#ID，而不是一个类？

谢谢！

Answer 1

尝试使用jQuery.parseHTML();

说明：将字符串解析为 DOM 节点数组。

$.ajax({
   url: 'http://www.somesite.com/',
   type: 'GET',
   success: function(res) {
      var data = $.parseHTML(res);  //<----try with $.parseHTML().
      $(data).find('div.content').each(function(){
          $('#here').append($(this).html());
     });

   }
 });

因为 ajax 响应是 string，这样你就不能使用 .find() 方法来查找 dom 节点。所以首先你必须将字符串解析为你从服务器收到的 dom 节点，然后你可以使用.find() 来选择你的目标元素。

Answer 2

在您最初的成功回调中，您从 responseText 获取您的 html 内容，您应该在第二种情况下执行相同操作：

   success: function(res) {
      $(res.responseText).find('div.content').each(function(){
          $('#here').append($(this).html());
     });

使用 class="content" 或 id 应该可以。但是，您应该知道，上面的代码将所有具有类内容的 div 添加到您的 id="here" div 中，这可能不是您想要的。如果您只想要特定元素的内容，请改用它的 id。