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

Question

我正在使用jQuery和此插件从外部站点中摘取内容。

使用以下代码效果很好：

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

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

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

$.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 =" there"div中都有类内容，这可能不是您想要的。如果您只需要特定元素的内容，请改用其 id 。