【发布时间】：2015-05-09 15:28:59
【问题描述】：
我使用 YQL 进行了跨域 JSON 请求，它在 html 文件中的表 <div> 中返回了 JSON 代码。
现在我的问题是我不知道如何获取这些数据并将其放入表格中。
这是代码（在 JS 文件中）：
// JavaScript Document
$(document).ready(function(){
var container = $('#target');
$('.ajaxtrigger').click(function(){
doAjax($(this).attr('href'));
return false;
});
function doAjax(url){
// if it is an external URI
if(url.match('^http')){
// call YQL
$.getJSON("http://query.yahooapis.com/v1/public/yql?"+
"q=select%20*%20from%20html%20where%20url%3D%22"+
encodeURIComponent(url)+
"%22&format=xml'&callback=?",
// this function gets the data from the successful
// JSON-P call
function(data){
// if there is data, filter it and render it out
if(data.results[0]){
var data = filterData(data.results[0]);
container.html(data);
// otherwise tell the world that something went wrong
} else {
var errormsg = "<p>Error: can't load the page.</p>";
container.html(errormsg);
}
}
);
// if it is not an external URI, use Ajax load()
} else {
$('#target').load(url);
}
}
// filter out some nasties
function filterData(data){
data = data.replace(/<?\/body[^>]*>/g,'');
data = data.replace(/[\r|\n]+/g,'');
data = data.replace(/<--[\S\s]*?-->/g,'');
data = data.replace(/<noscript[^>]*>[\S\s]*?<\/noscript>/g,'');
data = data.replace(/<script[^>]*>[\S\s]*?<\/script>/g,'');
data = data.replace(/<script.*\/>/,'');
return data;
}
});
这里是html代码：
<body>
<div id="doc" class="yui-t7">
<div id="hd" role="banner">
<h1>
Ajax with jQuery - using YQL
</h1>
</div>
<div id="bd" role="main">
<h2>
Demo
</h2>
<ul>
<li>
<a class="ajaxtrigger" href="ajaxcontent.html">
Load Ajax Content
</a>
</li>
<li>
<a class="ajaxtrigger" href="linkpage">
Get cspro.json
</a>
</li>
</ul>
<div id="target">
<!-- <script>window.alert(container)</script> -->
</div>
<h2>
Formatted List
</h2>
</div>
<div id="placeholder"></div>
<!-- <script> document.getElementById("placeholder").innerHTML = container.html(data);
</script> -->
<h2>
TEST
</h2>
</div>
<script src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script src="code.js"></script>
<script src="using-yql3.js"></script>
</body>
我试过了：
// $.getJSON(data, function(json){
// figure out the format of the answer here...
//
document.getElementById("placeholder").innerHTML=prova.buy.currency+" "+prova.sell.currency+" "+prova.offer[0].amount+" "+prova.offer[0].rate+" "+prova.offer[0].seller.name;
但是没有用。
（更新）根据您的指示，我已经对此进行了测试：
// TEST
$.getJSON("http://query.yahooapis.com/v1/public/yql?"+
"q=select%20*%20from%20html%20where%20url%3D%22"+
encodeURIComponent(url)+
"%22&format=json'&callback=?", // QUESTO è URL cui segue la "," e poi function(data)
// this function gets the data from the successful
// JSON-P call
function(data){
document.getElementById('placeholder').value = JSON.stringify(data,null,' '); //MIO
// if there is data, filter it and render it out
if(data.results[0]){
var data = filterData(data.results[0]);
container.html(data);
alert(data); //MIO TEST
// otherwise tell the world that something went wrong
} else {
var errormsg = "<p>Error: can't load the page.</p>";
container.html(errormsg);
}
}
);
但它可以简单地“跳转”与 document.getElementById 相关的代码部分来提醒（数据）。
我也把“xml”请求改成了“json”请求……
第二次更新
我已经解决了 html 表中“div id=placeholder”的问题。考虑到用“texture id=placeholder”更改“div id”是可行的，这个 div 似乎有一些问题。
所以，现在我的文本区域中有整个 json 字符串。 我已经尝试使用 getJson 命令来恢复部分数据并将其放入表中，但我又遇到了一些问题。
我看不懂你给我的代码，我有一个 json 代码，为什么我不能提取它并显示我需要的部分？
最终部分更新
问题是“数据”过滤器没有从数据中消除“”标签，因此 parse.Json(data) 无法读取格式！
知道我检索到了我需要的信息。
这是最终的 .js 代码：
// JavaScript Document
$(document).ready(function(){
var container = $('#target');
$('.ajaxtrigger').click(function(){
doAjax($(this).attr('href'));
return false;
});
function doAjax(url){
// if it is an external URI
if(url.match('^http')){
// call YQL
// TEST
$.getJSON("http://query.yahooapis.com/v1/public/yql?"+
"q=select%20*%20from%20html%20where%20url%3D%22"+
encodeURIComponent(url)+
"%22&format=json'&callback=?",
// this function gets the data from the successful
// JSON-P call
function(data){
// if there is data, filter it and render it out
if(data.results[0]){
**var data = filterData(data.results[0]);**
container.html(data);
alert(data); // TEST VERIFY (after FILTER before data extraction)
document.getElementById("prova1").value = data; // TEST full data return in a textarea
var obj = $.parseJSON(data); // JSON elements retrieve
alert(obj.sell.currency); // TEST for element retrieve
// TEST END
// otherwise tell the world that something went wrong
} else {
var errormsg = "<p>Error: can't load the page.</p>";
container.html(errormsg);
}
}
);
// if it is not an external URI, use Ajax load()
} else {
$('#target').load(url);
}
}
// filter out some nasties
function filterData(data){
**data = data.replace(/<body>/,'');** // INTERTED THIS ONE TO REMOVE body tag
data = data.replace(/<?\/body[^>]*>/g,'');
data = data.replace(/[\r|\n]+/g,'');
data = data.replace(/<--[\S\s]*?-->/g,'');
data = data.replace(/<noscript[^>]*>[\S\s]*?<\/noscript>/g,'');
data = data.replace(/<script[^>]*>[\S\s]*?<\/script>/g,'');
data = data.replace(/<script.*\/>/,'');
return data;
}
});
【问题讨论】：
-
从代码看来，您请求的是 XML 而不是 json，即 format=xml。见：Using JSON (JavaScript Object Notation) with Yahoo! Web Services
-
@Alberto 与其将您的标题更改为“已解决”，不如回答以下问题，以便其他人受益。
-
我已经在我的第一篇文章中插入了问题解决方案，并且我在标题中添加了“已解决”以传达里面有解决方案......出了什么问题？
标签： javascript json yql