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に「callback」のクエリ文字列パラメーターを自動的に追加するため、サーバー上のスクリプトは次のようなことを行う必要があります。

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

関数の名前を応答に追加する理由は、JSONPリクエストが、XMLHttpRequestオブジェクトによって作成される通常のリクエストではなく、実際にはDOMに追加されるスクリプトタグであるためです。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": []
    }
);​

サーバーが裸のJSONデータを返す場合、JSONPリクエストは<script src="...">タグの挿入とほぼ同じであるため、解析エラーが発生します。ベア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 に答える