2012-04-10 24 views
5

benim JSONP isteği ile ilgili bir sorun var .. veri gösterilmeyecektir, Kundakçı "geçersiz etiket" hata gösterir .."geçersiz etiket"?

enter image description here

Benim 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>"); 
    }); 
} 

Benim JSON:

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

Benim 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> 

isteği çalışıyor, ama yine de veri görüntülenmez.

enter image description here

Im Biri bana yardım edebilir gün için bir çözüm .. aramakla? Şimdiden teşekkür ederim!

ÇÖZÜM (güncelleme: 06.09.12)

bu sorunu çözdük.

jQuery.support.cors = true; 
+1

ama biri olarak kullanılmak üzere çalışıyor: çıplak JSON nesnesi değişmez nedenler hatası ayrıştırmak anlamak için şu örnekleri göz önünde bulundurun. JSONP'nin neden beklendiği gibi çalışmadığını öğrenin. (btw, 'getRessources' bir yazım hatası gibi görünüyor.) –

+0

istek güzel çalışıyor.Yanıtla bir görüntü ekledim .. – P4tR

+2

Yanıt JSONP değil, JSON. JSONP yanıtlarının "geri arama" ({"foo": "bar"}) gibi bir işlev çağrısına sarılması gerekiyordu. " –

cevap

7

bir JSONP çağrısına cevabı: hayır geri arama işlevi gerçeklestirmislerdir infaz edildiği sunucusu (DİNLENME arayüzü) .. JSONP kullanarak OLMADAN crossdomain isteklerini kurmak için başka bir yol izleyen jquery değişken ayarlamaktır JSON'un kendisini, çağrılan işlevin adının genellikle URL'de sağlandığı bir işlev çağrısında sarması gerekir. jQuery otomatik talep ediliyor URL'ye "geri" bir sorgu dizesi parametre ekler, böylece sunucu üzerinde komut benzer bir şey yapmalıdır: yanıta bir işlevin adını eklemek için

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

nedenle bir JSONP isteğinin aslında bir XMLHttpRequest nesnesi tarafından yapılacak normal bir istek yerine DOM'a eklenen bir komut dosyası etiketi olmasıdır. JSONP kullanımı, tarayıcının etki alanı dışı istekleri (ör. Varsayılan olarak) bir XHR'ye uygulayan etki alanları arası politika tarafından engellenmesini sağlar.

+0

mükemmel cevap. sadece bir ek. Bana öyle geliyor ki, bir sözdizimi yazım hatası var - kapanış ayracı yanlış yerde. "{$ _REQUEST ['callback'] ({$ JSON})};"; – heximal

+0

İşte buradaki parantezler PHP tarafından değişkenleri bir dizgeye dönüştürmek için kullanılıyor, yani {$ _REQUEST ['callback']} ({$ JSON}); 'someCallback ({" my ":" JSON) olarak basılacaktır "})' sonuçta ortaya çıkan çıktıda, $ _REQUEST ['callback'] '' 'SomeCallback'' ve' $ JSON'' dize eşdeğeri ("my" => "JSON") ' – steveukx

+0

Gördün mü, haklısın. Bu parantezler, dizgiye dizgeye benzeyen sadece $ JSON'dan (bu durumda parantez gerekli değildir) daha karmaşık değişkenler yerleştirmeyi planladığınızda kritik öneme sahiptir. – heximal

1

AJAX komut o zaman böyle dataType: "json" kullanabilirsiniz aynı alanda barındırılıyor ise: AJAX komut dosyası daha sonra sunucu JSONP verilerini geri dönmelidir başka bir alanda barındırılan ise

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 bir işlev çağrısı içinde sarılı veriler:

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

bir JSONP istekleri <script src="..."> etiketi enjekte kabaca benzer olduğundan sunucu döndürür çıplak JSON veri o zaman hataları ayrıştırma alacak olursa. * Geçerli bir JS programı değil * JSON olmasıdır

// 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" 
})​