Question

!!! Andrew Whitaker的回答（很好的例子）回答了下面的问题。基本上，您可以使用$ .getJSON（..）以编程方式从YQL等服务中获取JSON数据，并注意此服务可以与不同的域关联（即，不是由加载页面的同一域提供）。通常，您不能向不同的域发出这样的请求，因此在实现请求时使用“技巧”，其中HTML被动态生成并插入到DOM中，并且获取并执行新的跨域脚本。在执行返回的脚本时，它会导致处理它携带的JSON并调用您提供的回调函数。因为这种技术盲目地执行返回的脚本，所以必须注意安全问题（可能类似于加载任何脚本）。为了启用跨域功能，在提供的getJSON url中包含选项“？callback =？”是重要的，该选项由jQuery拾取和删除/修改为使用JSONP跨域调用的信号技术。请注意，这种返回JSON数据的方法依赖于JSONP的服务器端支持。再次感谢所有的帮助。 !!!

以下代码发送给YQL并获取IBM的当前股票价格（作为示例）。它工作正常并通过加载脚本文件来完成其任务，该脚本文件的URL有效地导致动态生成JSON数据，在加载和执行时，会导致运行“top_stories”并提取价格。但是，我想基于AJAX调用（$ .getJSON（..））进行此过程，其中我假设我从以下基于脚本的示例中分离出url和数据组件。我已经尝试了很多变化而没有成功 - 似乎我没有得到$ .getJSON（..）调用来调用回调函数。任何想法将不胜感激。 ...埃里克

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
  <head><title>YQL</title>
   <style type='text/css'>
    #results{ width: 40%; margin-left: 30%; border: 1px solid gray; padding: 5px; height: 200px; overflow: auto; } 
  </style>
  <script type='text/javascript'>
  // Parses returned response 
  function top_stories(o) {
      var price = o.query.results.xml_api_reply.finance.last.data;
      alert("last = " + price);
      // Place price in div tag
      document.getElementById('results').innerHTML = price;
  }
</script>
</head>
<body>
   <!-- Div tag for stories results -->
   <div id='results'></div>
   <!-- The YQL statment will be assigned to src. -->
   <script src="http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20google.igoogle.stock%20where%20stock%3D'ibm'%3B&format=json&diagnostics=true&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback=top_stories"></script>   
 </body>
</html>

Answer 1

这是一个有效的代码：

    $(function () {
    var ticker = "IBM";
    var url = "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.quotes%20WHERE%20symbol%3D'"+ticker+"'&format=json&diagnostics=true&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys";
    $.getJSON(url, function(data) {
      var items = [];
      $.each(data.query.results.quote, function(key, val) {
        if(key == "ChangePercentRealtime" || key == "LastTradeRealtimeWithTime") { items.push(val)};
      });
        $("#nameOfDiv1").html(items[0].substr(9));
        $("#nameOfDiv2").html(items[1].substr(6));
    });
});

substr（）从返回的结果中获取实际数据，其中包含一些无用的东西。它把它放在一些html div中。你可以选择你想要的任何结果集。希望它能帮到你！

Answer 2

我不确定这是不是你的意思，但是这里你可以将查询字符串参数分解为“数据”对象：

$.getJSON("http://query.yahooapis.com/v1/public/yql?callback=?", {
    q: "select * from google.igoogle.stock where stock='ibm'",
    format: 'json',
    diagnostics: true,
    env: 'store://datatables.org/alltableswithkeys'
}, top_stories);

示例： http://jsfiddle.net/dcXjk/1/

顺便说一句，如果你正在使用jQuery，你可以继续使用.html而不是直接分配给innerHTML：

function top_stories(o) {
    var price = o.query.results.xml_api_reply.finance.last.data;
    alert("last = " + price);
    // Place price in div tag
    $("#results").html(price);
}

这是一个更加充实的例子，你也可以传递股票代码：

<强> JavaScript的：

function top_stories(o, symbol) {
    var price = o.query.results.xml_api_reply.finance.last.data;

    // Place price in div tag
    $("#" + symbol).html(price);
}

function getStockValue(symbol) {
    $.getJSON("http://query.yahooapis.com/v1/public/yql?callback=?", {
        q: "select * from google.igoogle.stock where stock='" + symbol + "'",
        format: 'json',
        diagnostics: true,
        env: 'store://datatables.org/alltableswithkeys'
    }, function(data) {
        top_stories(data, symbol);
    });
}


$(function() {
    getStockValue("ibm");
    getStockValue("nflx");
    getStockValue("msft");
});

<强> HTML：

<p>IBM:</p><div id="ibm"></div>
<p>Netflix:</p><div id="nflx"></div>
<p>Microsoft:</p><div id="msft"></div>

示例： http://jsfiddle.net/B3L4p/1/

如何用JavaScript中的Ajax调用替换加载脚本文件（使用YQL和JavaScript）

2 个答案: