5

我的 JSONP 请求有问题。数据不会显示，Firebug 显示“无效标签”错误。

在此处输入图像描述

我的 JavaScript：

$.ajax({
    url: link,
    dataType: "jsonp",
    beforeSend: function(xhr) {
        var base64 = btoa(username + ":" + password);
        xhr.setRequestHeader("Authorization", "Basic" + base64);
        xhr.overrideMimeType("application/json");
    },
    jsonpCallback: "getResources"
})

function getResources(data) {
    alert(data);
    alert(JSON.parse(data));
    $.each(data.groupStatus, function(i, item) {
        $("body").append("<p>ID: " + item.id + "</p>");
    });
}

我的 JSON：

{
    "groupStatus": [
        {
            "id": "Application Layer Configuration-ApplicationLayer",
            "time": 1332755316976,
            "level": 0,
            "warningIds": [],
            "errorIds": []
        },
        {
            "id": "Application Layer-ApplicationLayer:nscalealinst2",
            "time": 1333431531046,
            "level": 0,
            "warningIds": [],
            "errorIds": []
        }
    ]
}

我的 HTML：

<html>
<head>
    <title>Monitor</title>
    <link href="css/gadget.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="js/jquery-1.7.2.js"></script>
</head>
<body>
    <div id="content"></div>
    <script type="text/javascript" src="js/gadget.js"></script>
</body>

该请求工作正常，但无论如何都不会显示数据。

在此处输入图像描述

我几天来一直在寻找解决方案。有人可以帮助我吗？先感谢您！

解决方案（更新：06.09.12）

我已经解决了这个问题。执行的服务器（REST接口）没有实现回调函数。另一种不使用JSONP设置跨域请求的方法是设置以下jquery变量：

jQuery.support.cors = true;
4

2 回答 2

7

对 JSONP 调用的响应需要将 JSON 本身包装在函数调用中，其中被调用函数的名称通常在 url 中提供。jQuery 会自动将“回调”的查询字符串参数添加到正在请求的 URL，因此您服务器上的脚本应该执行类似于：

// assuming that $JSON contains your JSON content
print "{$_REQUEST['callback']}( {$JSON} );";

将函数名称添加到响应中的原因是 JSONP 请求实际上是附加到 DOM 的脚本标记，而不是由 XMLHttpRequest 对象发出的常规请求。使用 JSONP 允许浏览器发出跨域请求，否则这些请求会被（默认情况下）应用于 XHR 的跨域策略阻止。

于 2012-04-10T06:36:56.063 回答
1

如果 AJAX 脚本托管在同一个域上，那么您可以dataType: "json"像这样使用：

function getResources(data, textStatus, jqXHR) {
    console.log(data);
    // no need to do JSON.parse(data)
    $.each(data.groupStatus, function(i, item) {
        $("body").append("<p>ID: " + item.id + "</p>");
    });
}
$.ajax({
    url: link,
    dataType: "json",
    beforeSend: function(xhr) {
        var base64 = btoa(username + ":" + password);
        xhr.setRequestHeader("Authorization", "Basic" + base64);
        xhr.overrideMimeType("application/json");
    },
    success: getResources
});​

如果 AJAX 脚本托管在另一个域上，则服务器必须返回 JSONP 数据——封装在函数调用中的 JSON 数据：

callback(
    {
        "groupStatus": []
    }
);​

<script src="...">如果服务器返回裸 JSON 数据，那么您将收到解析错误，因为 JSONP 请求与注入标签大致相似。要了解为什么裸 JSON 对象字面量会导致解析错误，请考虑以下示例：

// WORKS
{
    alert("foo");
}

// PARSE ERROR -- quote from MDN:
// You should not use an object literal at the beginning of a statement.
// This will lead to an error or not behave as you expect, because the { 
// will be interpreted as the beginning of a block.
{
    "foo": "bar"
}

// WORKS
callback({
    "foo": "bar"
})​
于 2012-04-10T06:46:05.353 回答