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

Question

我正在使用jQuery和这个插件来从外部网站提取内容.

使用以下代码可以很好地工作:

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

但我真正想做的是,只从目标站点拉出一个部分(div),我明白这只有在使用该load()方法时才有可能,而不是GET.

然后我找到了这段代码,但是当我尝试将其构建到代码中时,它似乎不起作用,因此:

$.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。