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

我正在使用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上的请求，请求似乎确实成功，但代码似乎无法在目标站点上找到以下标记：

。

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

谢谢！

Answer 1

在你最初的成功回调中，你从responseText中获取你的html内容，你应该在第二种情况下做同样的事情：

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

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

Answer 2

尝试使用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()来选择你的目标元素。