jquery - 使用jquery从odata wcf服务获取json

标签 jquery html json

所以,我有(事实上我们都有)这个由 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);
});

这个有效。为什么剑道没有?

最佳答案

您正在进行跨源调用。出于安全原因,浏览器不直接允许这些操作。跨源调用意味着您正在从另一个域、协议(protocol)或其他端口调用 URL。这意味着如果您的代码位于 http://demos.kendoui.c​​om/yourpage 上,您就不会收到错误。

首先不要只在本地文件系统上运行代码。将其放在网络服务器上。然后你会收到类似的错误(“Access-Control-Allow-Origin 不允许”),但是...

您有几个选择:

如果您可以控制服务器:

  • enable cors (=跨源资源共享;发送额外的 header 信息)
  • enable jsonP (=带有填充的 json;用回调方法包装 json)

如果您无法控制服务器:

  • 使用proxy script (服务器上的脚本获取数据并将其传递)

更新:

为什么它可以与 panoramio url 一起使用?服务器启用了 jsonP。通过输入: callback=? jquery 知道它应该使用 jsonP 并填写回调。尝试一下并检查 Chrome 开发人员工具中的网络选项卡。您将看到回调参数已填充,并且响应以该函数开始。

关于jquery - 使用jquery从odata wcf服务获取json,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18343453/

相关文章:

javascript - jQuery - 可以使用内容加载器的一些帮助

python - 有没有办法覆盖 python 的 json 处理程序?

jquery - 如何在 jquery 中选择更改时更新 div

PHP 函数中的 JavaScript jQuery

javascript - jQuery:下拉菜单脚本问题

jquery - 如何向子菜单添加淡入淡出或滑动效果

javascript - 两个 ng-submit 事件用于在一个 html 页面中的两个表单上进行验证

html - 居中图像 css/html

javascript - 使用 Node js 进行 Angular http 路由

json - MOXy 无法使用 application/json 正确编码 UTF-8 字符