如何简单地显示YQL的xml输出或将JSON输出显示为html

所以我一直在努力从页面中抓取数据并显示它（与源的格式大致相同）。 我发现YQL，我发现它很棒，除了我无法弄清楚如何只显示整个输出没有什么特别的（基本格式除外）

YQL输入代码是：

select * from html where url="http://directory.vancouver.wsu.edu/anthropology" and xpath="//div[@id='facdir']" 

使用它返回JSON：

 http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%3D%22http%3A%2F%2Fdirectory.vancouver.wsu.edu%2Fanthropology%22%20and%20xpath%3D%22%2F%2Fdiv%5B%40id%3D'facdir'%5D%22&format=json&callback=anthropology 

我已经按照雅虎教程，创建了新闻小部件等，但没有一个教程涵盖基本视图（也不需要链接，只是段落设置）。

像这样：

 Name Title Phone:(###)###-#### Location: Building and Room # [e-mail] 

这是我从http://christianheilmann.com输出的内容，但它没有做任何事情（显然她的教程都没有工作，每个人都尝试过）：

      
 Copied: 
 
  function anthropology (0) { // get the DIV with the ID $ var info = document.getElementById('facdir'); // add a class for styling info.className = 'js'; // if it exists if(info){ // get the info data returned from YQL var data = o.query.results.span; var link = info.getElementsByTagName('a')[0]; link.innerHTML = '(see all info)'; // to the main container DIV var out = document.createElement('span'); out.className = 'info'; info.insertBefore(out,link.parentNode); } }    

Answer 1

我最近完成了一个带有几个jsFiddles的教程，并解释了如何使用YQL ， XPATH和jQuery .ajax()来解决不同的SO问题，这将为你的方向提供一些启示。 你可以在这里看到SO答案 。

为了符合您的问题的可接受答案，我已经整理了一个工作演示，向您展示数据从您请求的网页中抓取数据是多么容易。

jsFiddle演示包含大量注释和console.log()消息，以了解工作流程过程。 例如，确保您激活浏览器控制台并使用Firebug 。 用于构建Faculty Member Box的HTML和CSS模仿原始网站中的那些，包括图像，名称，电子邮件和网页主题中的链接。

DEMO：

jsFiddle Data Scraping XML：动态网页构建

修！ 除了上面修改过的jsFiddle，请参阅相关内容

jsFiddle教程：创建动态Div（ 现在改进了！ ）

HTML：

jQuery的：

 var directoryName = 'child-development-program'; $.ajax({ type: 'GET', url: "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%3D%22http%3A%2F%2Fdirectory.vancouver.wsu.edu%2F" + directoryName + "%22%20and%20xpath%3D%22%2F%2Fdiv%5B%40id%3D'content-inner'%5D%2Fdiv%2Fdiv%2Fdiv%2Fdiv%2Fdiv%5B2%5D%22", dataType: 'xml', success: function(data) { if (data) { // Show in console the jQuery Object. console.info('Here is the returned query'); console.log( $(data).find('query') ); // Show in console the results in inner-html text. var textResults = $(data).find('results').text(); console.log( textResults ); // Parse the list of faculty members. Variable indexFM is not used for indexed faculty member. $(data).find('results').find('.views-row').each(function(indexFM){ // This variable will store the current faculty member. var facultyMember = this; console.info('Faculty jQuery DIV Object shown on next lines.'); console.log( facultyMember ); // Parse the contents of each faculty member. Variable indexFC is not used for indexed faculty content. $(facultyMember).each(function(indexFC){ // Get Thumbnail Image of Faculty Member var facultyMemberImage = $(this).find('.views-field-field-profile-image-fid #directoryimage a img').attr('src'); console.log( facultyMemberImage ); // Get Title (Name) of Faculty Member var facultyMemberTitle = $(this).find('.views-field-field-professional-title-value #largetitle').text(); console.log( facultyMemberTitle ); // Get relative URL fragment. // // Stackoverflow Edit: Much more extraction in this section, see jsFiddle link above. // // Get Email of Faculty Member var facultyMemberEmail = $(this).find('.views-field-field-email-value span').text(); // Simple dashed line to separate faculty members as seen in browser console. console.log('--------'); var divObject = '
' + facultyMemberTitle + '
' + facultyMemberPosition + '
Phone: ' + facultyMemberPhone + '
Location: ' + facultyMemberBuilding + ' ' + facultyMemberRoom + '
' + facultyMemberEmail + '
'; // Build webpage with dynamic data. $('#results').append( divObject ); }); }); } } }); 

屏幕截图： 照片中的缩略图是100px x 100px 修订后的照片为修改过的jsFiddle !!

---

但是在真正关注你的问题时，我想尝试一些新的和简单的……然而，结果是非常可接受的。 这次，数据抓取技术使用网页本机CSS文件作为jsFiddle中的资产，同时还将返回的数据直接用于DOM 。

此方法使用与上述相同的原理，除了使用html作为.ajax() dataType以获得原始网页的近似克隆 。 唯一的缺点是需要整个CSS文件，但是您可以解析原始文件以删除不需要的多余样式和选择器（ 重要的是不要破坏IE中的4096 CSS Selector障碍 ）。

DEMO：

jsFiddle Data Scraping HTML：克隆那个网页

HTML

jQuery的：

 var directoryName = 'anthropology'; $.ajax({ type: 'GET', url: "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%3D%22http%3A%2F%2Fdirectory.vancouver.wsu.edu%2F"+directoryName+"%22%20and%20xpath%3D%22%2F%2Fdiv%5B%40id%3D'content-area'%5D%22", dataType: 'html', success: function(data) { $('#facultyAnthropology').append($(data).find('results')); } }); 

屏幕截图： 如上所示，照片中的缩略图为100px x 100px