因此，我一直在研究一种从页面中抓取数据并显示它的方法(以与源格式大致相同的格式)。我发现了 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
我遵循了雅虎教程，并创建了新闻小部件等，但没有一个教程涵盖了基本 View (也不需要链接，只需段落设置)。
像这样:
Name
Title
Phone:(###)###-####
Location: Building and Room #
<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="385d55595154784e59565b574d4e5d4a164f4b4d165d5c4d" rel="noreferrer noopener nofollow">[email protected]</a>
这是我从 http://christianheilmann.com 得到的输出，但它没有做任何事情(显然她的教程都不起作用，每个教程都尝试过):
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>
<b>Copied:</b>
</p>
<div>
<script>
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);
}
}
</script>
<script src='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%2Fdiv%2Fdiv%2Fdiv%2Fdiv%2Fdiv%2Fdiv%2Fdiv%2Fdiv%2Fdiv%2Fdiv%22&format=json&callback=anthropology'></script>
</div>
最佳答案
我最近完成了一个使用几个 jsFiddles 的教程，并解释了如何使用 YQL、XPATH 和 jQuery .ajax() 对于一个不同的 SO 问题，这将为您指明方向。可以看到SO Answer here .
为了让您的问题得到可接受的答案，我制作了一个工作演示，向您展示从您请求的网页中抓取数据是多么容易。
jsFiddle 演示包含大量注释和 console.log() 消息，可帮助您了解工作流程。确保激活浏览器控制台并使用 Firebug例如。用于构建教员成员(member)框的 HTML 和 CSS 模仿原始网站中的内容，包括图像中的链接、姓名、电子邮件和网页主题也是如此。
演示:
jsFiddle Data Scraping XML: Dynamic Webpage Building
已修改!!! 除了修改上面的jsFiddle外，参见相关
jsFiddle Tutorial: Creating Dynamic Div's (Now Improved!)
HTML:
<div id="results"></div>
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 = '<div class="dynamicResults"><div class="dynamicThumb"><a href="' + facultyMemberUrl + '"><img src="' + facultyMemberImage + '" alt=""></a></div><div class="dynamicInfo"><div class="dynamicText"><a href="' + facultyMemberUrl + '" class="dynamicName">' + facultyMemberTitle + '</a></div><div class="dynamicText">' + facultyMemberPosition + '</div><div class="dynamicText">Phone: ' + facultyMemberPhone + '</div><div class="dynamicText">Location: ' + facultyMemberBuilding + ' <span>' + facultyMemberRoom + '</span></div><div class="dynamicText"><a href="' + facultyMemberEmailUrl + '" class="dynamicEmail">' + facultyMemberEmail + '</a><span class="dynamicEmailpic"></span></div></div></div><div class="clear"></div>';
// Build webpage with dynamic data.
$('#results').append( divObject );
});
});
}
}
});
屏幕截图: 照片中的缩略图为 100px x 100px 修订后的 jsFiddle 的照片!!
但是在真正考虑你的问题时，我想尝试一些新的、简单的东西......但是结果是非常可以接受的。这次的数据抓取技术是使用网页原生 CSS 文件作为 jsFiddle 中的资源，同时将返回的数据直接使用到 DOM 中。
此方法使用与上面相同的原理，不同之处在于它使用 html 作为 .ajax() dataType 以获得可用的原始网页的近乎克隆。唯一的缺点是需要整个 CSS 文件，但您可以解析原始文件以删除多余的样式和不需要的选择器(重要的是不要打破 IE 中的 4096 CSS 选择器障碍)。
演示:
jsFiddle Data Scraping HTML: Clone That Webpage
HTML
<link type="text/css" rel="stylesheet" media="all" href="http://directory.vancouver.wsu.edu/sites/directory.vancouver.wsu.edu/files/css/css_f9f00e4e3fa0bf34a1cb2b226a5d8344.css" />
<div id="facultyAnthropology"></div>
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'));
}
});
屏幕截图: 如上，照片中的缩略图为 100 像素 x 100 像素
关于javascript - 如何简单地显示 YQL 的 xml 输出或将 JSON 输出为 html，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14048943/