2012-04-10 4 views
5

は私JSONPリクエストに問題を持っている... データは表示されません、Firebugのは、 "無効なラベル" エラーが表示されます。..JSONPを使用しているときに「無効なラベル」ですか?

enter image description here

マイ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> 

要求が正常に動作しますが、とにかくデータは表示されません。日のためのソリューションを探して

enter image description here

イム..誰かが私を助けることができますか?前もって感謝します!

SOLUTION(更新:06.09.12)

私はこの問題を解決してきました。

jQuery.support.cors = true; 
+1

JSONは有効なJSプログラムではありませんが、1つとして使用しようとしているためです。 JSONPが期待どおりに動作しない理由を確認します。 (btw、 'getRessources'はスペルミスのようです) –

+0

リクエストは正常に動作します..私はレスポンスのある画像を追加しました。 – P4tR

+2

レスポンスはJSONPではなく、JSONです。 JSONPレスポンスは、 'callback({" foo ":" bar "})のような関数呼び出しの中にラップされていると考えられます。 –

答えて

7

JSONPコールへの応答:コールバック関数が実行されなかった実行されたサーバー(RESTインターフェース).. JSONPを使用せずにクロスドメインリクエストを設定するもう一つの方法は、次のjqueryの変数を設定することですJSON自体を関数呼び出しでラップする必要があります。関数呼び出しでは、呼び出される関数の名前が通常urlで提供されます。 jQueryが自動的に要求されているURLに「コールバック」のクエリ文字列パラメータを追加しますので、あなたのサーバー上のスクリプトは次のように何かを行う必要があります。

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

に応答する関数の名前を追加するための理由をJSONPリクエストは、実際にXMLHttpRequestオブジェクトによって行われる通常のリクエストではなく、DOMに追加されたスクリプトタグであるということです。 JSONPを使用すると、ブラウザはクロスドメイン要求を行うことができます。クロスドメイン要求は、XHRに(デフォルトで)適用されるクロスドメインポリシーによってブロックされます。

+0

優れた答えです。ただ一つの追加。構文ミススペルがあるようです - 閉鎖括弧は間違った場所にあります。 "{$ _REQUEST ['callback']({$ JSON})};"; – heximal

+0

ここで、中括弧は変数を文字列に補間するためにPHPによって使用されているため、 '{$ _REQUEST ['callback']}({$ JSON});'はsomeCallback({"my": "JSON '$ JSON'は 'array(" my "=>" JSON ")' – steveukx

+0

ahに相当するものであると仮定すると、参照してください。この中かっこは、文字列への配列のような$ JSON(この場合は中括弧は必要ありません)よりも複雑な変数を埋め込む予定のときに重要です。 – heximal

1

AJAXのスクリプトは、同じドメインでホストされている場合、あなたはこのようにdataType: "json"を使用することができます:AJAXスクリプトが別のドメインでホストされている場合は、サーバーはJSONPデータを返す必要があります

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 
});​ 

- JSON関数呼び出し内にラップデータ:

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

サーバは裸JSONデータを返す場合JSONPリクエストが<script src="...">タグを注入するとほぼ類似しているので、あなたがエラーを解析してしまいます。

// 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" 
})​ 
関連する問題