如何在JavaScript中用Ajax调用替换加载脚本文件(在JavaScript中使用YQL )
!!！安德鲁·惠特克( Andrew Whitaker)的回答回答了以下问题(很好的例子)。基本上你可以使用$.getJSON(..)以编程方式从服务(如YQL )获取JSON数据，请注意，此服务可以与不同的域关联(即，不是由加载页面的相同域提供的)。通常，您不能向不同的域发出这样的请求，因此在实现请求时使用了一种“技巧”，即动态生成HTML并将其插入到DOM中，并获取并执行新的跨域脚本。在执行返回的脚本时，它会导致处理它附带的JSON，并调用您提供的回调函数。因为这种技术盲目地执行返回的脚本，所以必须小心安全问题(可能类似于加载任何脚本)。为了启用跨域能力，重要的是在所提供的JSONP中包括选项"?callback=?"，该选项被jQuery拾取并移除/修改，作为使用getJSON跨域调用技术的信号。注意，这种返回JSON数据的方法依赖于服务器端对JSONP的支持。再次感谢你的帮助。!!！
下面的代码转到YQL并获取IBM的当前股票价格(作为示例)。它运行良好，并通过加载脚本文件来完成其任务，该脚本文件的URL有效地导致动态生成JSON数据，该数据在加载和执行时导致'top_stories‘运行并提取价格。但是，我想让这个过程基于AJAX调用($.getJSON(..))我假设我从下面的基于脚本的例子中分离出了url和data组件。我尝试了许多变体，但都没有成功--我似乎无法获得$.getJSON(..)调用以调用回调函数。任何想法都将不胜感激。...Eric
<!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>回答 2
Stack Overflow用户
发布于 2012-07-17 08:20:13
下面是一个有效的代码：
$(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中。显然，你可以选择任何你想要的结果集。希望能对你有所帮助！
Stack Overflow用户
发布于 2012-07-17 08:24:01
我不确定这是否是您的意思，但是下面是如何将querystring参数分解为一个"data“对象的方法：
$.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>https://stackoverflow.com/questions/11514409
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号