使用 jQuery getJSON 进行简单的 API 调用
Posted
技术标签:
【中文标题】使用 jQuery getJSON 进行简单的 API 调用【英文标题】：Making a simple API call with jQuery getJSON 【发布时间】：2016-12-14 22:59:49 【问题描述】：我正在尝试在 Codepen 中构建一个简单的随机引用生成器，您可以在此处看到：http://codepen.io/scabbyjoe/pen/dXQmLw
相关代码贴在下面：
<html>
<head>
</head>
<body>
<h1>Random Quote Machine</h1>
<div class="quote">
</div>
<div class="btn">New Quote</div>
</body>
</html>
$(document).ready(function()
$(".btn").on("click", function()
$.getJSON("http://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en", function(json)
$(".quote").html(JSON.stringify(json));
);
);
);
恐怕我一定是误解了 getJSON 工具，因为我无法在我的 .quote div 中加载任何内容。
谁能解释为什么这不起作用？
我试图从这个（单独的）示例中进行操作，该示例确实有效：
<script>
$(document).ready(function()
$("#getMessage").on("click", function()
$.getJSON("/json/cats.json", function(json)
$(".message").html(JSON.stringify(json));
);
);
);
</script>
<div class="container-fluid">
<div class = "row text-center">
<h2>Cat Photo Finder</h2>
</div>
<div class = "row text-center">
<div class = "col-xs-12 well message">
The message will go here
</div>
</div>
<div class = "row text-center">
<div class = "col-xs-12">
<button id = "getMessage" class = "btn btn-primary">
Get Message
</button>
</div>
</div>
</div>
【问题讨论】：
更多信息请见getJSON() cross-domain errors
【参考方案1】：
检查您的控制台是否有错误：
XMLHttpRequest 无法加载 http://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en。请求的资源上不存在“Access-Control-Allow-Origin”标头。 Origin 'http://s.codepen.io' 因此不允许访问。
除非他们明确允许，否则您不能向托管在与您自己的域分开的域上的服务发出 AJAX 请求。此消息表示不允许。
也许在某些情况下是允许的；检查他们的文档。如果不是，您必须通过您自己的服务器代理请求。也不能保证在这种情况下也允许这样做。您可能必须向他们提供 API 密钥之类的东西或被添加到白名单中。
【讨论】：
快点打败我吧！ 好的，谢谢 Jacob，这是有道理的，因为即使这个简单的示例几乎完全从 jQuery 文档中复制也不起作用：codepen.io/scabbyjoe/pen/bZQrRg 所以为了继续工作，我需要在本地进行测试吗？ 是的，或者尝试通过您自己的本地服务器进行代理。【参考方案2】：您可以在控制台面板中发现错误消息：
XMLHttpRequest 无法加载 http://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en。 请求中不存在“Access-Control-Allow-Origin”标头 资源。因此不允许使用原点“http://s.codepen.io” 访问。
您应该确保 api.forismic.com 为允许跨域的资源提供服务。
或者你可以看看jquery.ajaxcrossDomain选项
【讨论】：
以上是关于使用 jQuery getJSON 进行简单的 API 调用的主要内容，如果未能解决你的问题，请参考以下文章
应该使用 jQuery 的 parseJSON/getJSON 方法吗？
JQuery $.getJSON 加载本地 JSON 文件不起作用