使用YQL从跨域服务器获取JSON数据，如何使用检索到的数据创建表

时间：2015-05-09 15:28:59

标签： javascript json yql

我使用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”解决了这个问题。看起来这个div有一些问题，考虑到用“texture id = placeholder”改变“div id”就行了。

所以，现在我的文本区域中有整个json字符串。 我已经尝试了getJson命令来恢复数据并将其放入表中，但我又遇到了一些问题。

我无法理解您向我建议的代码，我有一个json代码，为什么我无法提取它并显示我需要的部分？

最终部分更新

问题是“数据”过滤器没有从数据中删除“”标记，因此parse.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

// 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;
 }
});

2 个答案:

答案 0 :(得分：1)

您的主要问题是您要求XML格式的数据。建议将查询字符串更改为format = json。这将返回一个可以更轻松地使用的javascript对象。

由于您已经在使用jQuery，我强烈推荐使用DataTables插件。

这是一个代码片段，用于说明从Yahoo返回的数据格式。 Yahoo Console在测试时也非常有用。

＆＃13;
＆＃13; 
<html>
 <head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  </head>
  <body>
    
    
    <button onclick="json()">GET JSON</button><button onclick="xml()">GET XML</button>
    
    <textarea id="stdout" style="width:100%;height:40em;"></textarea>
    
   <script type="text/javascript">
     
   function json() {  
     var url = 'https://query.yahooapis.com/v1/public/yql?q=show%20tables&format=json&diagnostics=true&callback=?';
     $.getJSON( url, function(data) {
          document.getElementById('stdout').value = JSON.stringify(data,null,'  ');
     });
   }
     
   function xml() {  
     var url = 'https://query.yahooapis.com/v1/public/yql?q=show%20tables&format=xml&diagnostics=true&callback=?';
     $.getJSON( url, function(data) {
           document.getElementById('stdout').value = JSON.stringify(data,null,'  ');
     });
   }
     
   </script>
    
    </body>
  </html>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

您可能需要查看此库：https://github.com/IonicaBizau/jQuery-cross-domain-requests

相关问题
最新问题