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

Javascript 使用YQL从跨域服务器获取JSON数据,如何使用检索到的数据创建表,javascript,json,yql,Javascript,Json,Yql,我用YQL做了一个跨域JSON请求,它在html文件的一个表中返回JSON代码 现在我的问题是,我不知道如何获取这些数据并将其放入表中 这是JS文件中的代码: // JavaScript Document $(document).ready(function(){ var container = $('#target'); $('.ajaxtrigger').click(function(){ doAjax($(this).attr('href')); return false; }); fu

我用YQL做了一个跨域JSON请求,它在html文件的一个表中返回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;
}
});
但它不起作用

根据您的指示进行更新,我已经测试过:

但它只需跳过与document.getElementById相关的代码部分,就可以运行到alertdata

我还将xml请求更改为json请求

第二次更新

我已经解决了html表中div id=占位符的问题。考虑到使用纹理id=占位符更改div id是可行的,这个div似乎有一些问题

现在,我的文本区域中有了整个json字符串。 我尝试使用getJson命令恢复部分数据并将其放入表中,但还是遇到了一些问题

我不能理解你向我建议的代码,我有一个json代码,为什么我不能提取它并显示我需要的部分

最后部分更新

问题是数据过滤器没有从数据中消除标记,因此parse.Jsondata无法读取格式

好的,我知道我检索我需要的信息

下面是最终的.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格式的数据。建议将查询字符串更改为format=json。这将返回一个javascript对象,您可以更轻松地使用它

由于您已经在使用jQuery,我强烈推荐该插件

下面是一个代码片段,演示了从Yahoo返回的数据格式。而且在测试时,这种方法也非常有用

获取JSONGetXML 函数json{ var url='1〕https://query.yahooapis.com/v1/public/yql?q=show%20tables&format=json&diagnostics=true&callback=?'; $.getJSON url,functiondata{ document.getElementById'stdout'。value=JSON.stringifydata,null'; }; } 函数xml{ var url='1〕https://query.yahooapis.com/v1/public/yql?q=show%20tables&format=xml&diagnostics=true&callback=?'; $.getJSON url,functiondata{ document.getElementById'stdout'。value=JSON.stringifydata,null'; }; }
您可能希望查看此库:

从代码中可以看出您请求的是XML而不是json,即format=XML。请看:@Alberto与其将你的标题改为“已解决”,不如回答下面的问题,这样其他人可以从中受益。我将问题孤寂插入了我的第一篇帖子中,我在标题中添加了“已解决”,以便与大家交流,里面有解决方案。。。怎么了?
//      $.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);
      }
    }
  );
// 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;
 }
});