【发布时间】:2014-03-27 08:08:17
【问题描述】:
如果这个问题已经得到解答,我深表歉意。
我正在尝试从使用 jQuery .ajax 调用公开 JSON 接口的 REST Web 服务中检索数据。
当我使用 URL 调用服务时,虽然我得到 HTTP 状态代码 200 OK,但 jQuery 调用失败。
当我将响应复制到文件系统上的文件中并检索它时,同样的调用会起作用。
我正在访问的文件和我正在调用的 Web 服务都在同一台机器上。
关于以下代码中使用的 url 的一些说明:
使用:
url: "http://localhost:9090/app/user/861",
调用失败,在所有浏览器上进入 .fail。
URL 本身在所有浏览器上返回 json:
{
"userid": 861,
"employeeno": "123",
"jobdesc": "Developer",
"firstname": "Jasper",
"lastname": "Fitussi"
}
在本地文件系统中使用“test.json”时的行为如下:
url: "ajax/test.json",
在 Firefox 上,调用执行,进入 .done 并在页面上显示结果。
在 Chrome 上,呼叫失败并显示状态 404 和以下消息 -
“请求的资源上不存在'Access-Control-Allow-Origin'标头。因此不允许访问源'null'。”
我尝试了不同的组合,更改了dataType:"jsonp",在 URL 的末尾添加了?callback=?,并在 test.json 中用 '(' 和 ')' 封装了数据,但没有成功。
请理解我是 UI 编程、javascript 和 jQuery 的新手。
请帮助我做错了什么。这是javascript:
<script src="http://code.jquery.com/jquery-1.10.2.js" type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
type: "GET",
url:"ajax/test.json",
// the following commented call fails, goes into .fail
// url:"http://localhost:9090/app/user/861",
contentType: "application/json",
accepts: "application/json",
dataType: "json"
})
.done(function(data) {
alert("Success");
console.log(data);
var items = [];
$.each( data, function( key, val ) {
items.push( "<li id='" + key + "'>" + val + "</li>");
});
$( "<ul/>", {
"class": "my-new-list",
html: items.join( "" )
}).appendTo( "body" );
})
.fail(function(data) {
console.log(data);
alert("Failed");
})
.always(function() {
alert("In Always");
});
});
</script>
以下是我将url粘贴到浏览器时的输出(也是ajax/test.json的内容):
{
"userid": 861,
"employeeno": "123",
"jobdesc": "Developer",
"firstname": "Jasper",
"lastname": "Fitussi"
}
【问题讨论】:
-
我想你会发现你在某个地方有一个奇怪的 url。几乎每个现代浏览器都对来自站点当前托管的其他来源(url 域)的
ajaxing 实施限制。尝试将您的网址更改为"/test.json",我认为这有更好的工作机会。否则请仔细检查您的网址。 -
另外,请确保您从服务页面发出请求,该请求以 http:// 开头,而不是以 file:// 开头的内容
-
我尝试将文件移动到文件夹中,并尝试使用在本地主机上运行的 tomcat 提供的页面,但行为与上述相同。我的目标是从服务页面检索数据 - 这不适用于任何浏览器。那么localhost不是同一个域吗?
-
本地主机是否与 ajax 请求和它源自的文档相同的域?
-
请清楚地引用您面临的问题数量,好像您指定了 404 以及 200 失败!
标签: javascript ajax json jquery