使用 jquery 从 odata wcf 服务获取 json答案

【问题标题】：getting json from odata wcf service with jquery使用 jquery 从 odata wcf 服务获取 json
【发布时间】：2013-08-20 19:27:27
【问题描述】：

所以，我有（事实上我们都有）这个很酷的由 Telerik Kendo UI 提供的 WCF Odata 服务，例如：（使用工作链接更新）http://demos.telerik.com/kendo-ui/Service/Northwind.svc。出于测试目的，这是非常少数的。

我想从 javascript 调用它并将结果显示为警报。所以，我的代码是：

<!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></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript">
        function button(src1) {
        $.getJSON('http://demos.kendoui.com/service/Northwind.svc/Tasks(4)/Start?$format=json', 
            function(json) {
            alert(json.d.Start);
        });
        }
    </script>
</head>
<body>
    <form id="form1">
    <div><input type="button" onclick="javascript:button();" value="Call WCF Service" /></div>
    </form>
</body>
</html>

但仍然在 Google Chrome 控制台中，我得到这个“Access-Control-Allow-Origin 不允许 Origin null”。为什么这样？

UPD：奇怪的是，我在 stackoverflow 的某个地方发现了这段代码，但是用这个调用而不是我的调用：

$.getJSON('http://www.panoramio.com/wapi/data/get_photos?v=1&key=dummykey&tag=test&offset=0&length=20&callback=?&minx=-30&miny=0&maxx=0&maxy=150', 
   function(json) {
   alert(json.photos[1].photoUrl);
});

而这个工作。为什么剑道没有？

【问题讨论】：

可以参考这个链接：stackoverflow.com/questions/8456538/…
@prot，不确定，但由于这将是跨域的，你不应该以某种方式使用 jsonp。

标签： jquery html json

【解决方案1】：

您正在进行跨源呼叫。出于安全原因，浏览器不直接允许这些内容。跨源调用意味着您正在从另一个域、协议或其他端口调用一个 url。这意味着如果您的代码在 http://demos.kendoui.com/yourpage 上，您将不会收到错误消息。

首先不要只在本地文件系统上运行您的代码。把它放在网络服务器上。然后你会得到一个类似的错误（'Access-Control-Allow-Origin 不允许'），但是......

你有几个选择：

如果您可以控制服务器：

enable cors（= 跨源资源共享；发送额外的标头信息）
enable jsonP（=带有填充的json；使用回调方法包装json）

如果您无法控制服务器：

使用proxy script（服务器上的脚本获取数据并传递数据）

更新：

为什么它适用于 panoramio 网址？服务器启用了 jsonP。通过输入：callback=? jquery 知道它应该使用 jsonP 并填写回调。试试看，并检查您的 chrome 开发者工具中的网络选项卡。您会看到回调参数已填写完毕，并且响应以该函数开始。

【讨论】：

【解决方案2】：

好的，多亏了 VDP，我已经成功地操纵了代码，因此它甚至可以与 Kendo 一起使用。而且由于我无权访问他们的服务器，看来他们实际上已经实现了 jsonp。

这里是工作代码，如上所述，所有需要的 - 添加 $callback=?：

$.getJSON('http://demos.kendoui.com/service/Northwind.svc/Tasks(4)/Start?$format=json&$callback=?',
    function(json) {
    alert(json.d.Start);
});

【讨论】：