2012-04-10 8 views
5

Ho un problema con la mia richiesta JSONP .. non verranno visualizzati I dati, Firebug mostra un errore di "Etichetta non valido" .."etichetta non valida" quando si utilizza JSONP?

enter image description here

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

mio JSON:

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

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

La richiesta funziona bene, ma in ogni caso non vengono visualizzati i dati.

enter image description here

Im alla ricerca di una soluzione per giorni .. Qualcuno può aiutarmi? Grazie in anticipo!

SOLUZIONE (aggiornamento: 06.09.12)

Ho risolto questo problema. Il server (interfaccia REST) ​​su cui è stato eseguito l'aveva alcuna funzione di callback implementato .. Un altro modo per impostare richieste crossdomain SENZA usando JSONP è quello di impostare la seguente variabile jquery:

jQuery.support.cors = true; 
+1

Questo perché JSON * non * è un programma di JS valido, ma si sta cercando di essere utilizzato come uno. Scopri perché JSONP non funziona come previsto. (btw, 'getRessources' sembra un errore ortografico.) –

+0

la richiesta funziona correttamente ..ho aggiunto un'immagine con la risposta .. – P4tR

+2

La risposta non è JSONP, è JSON. Le risposte JSONP devono essere racchiuse all'interno di una chiamata di funzione come 'callback ({" foo ":" bar "})' –

risposta

7

La risposta ad un invito JSONP ha bisogno di avvolgere il JSON stesso in una chiamata di funzione, in cui il nome della funzione chiamata viene solitamente fornito nell'URL. jQuery aggiunge automaticamente un parametro di stringa di query di "callback" all'URL che viene richiesto, così lo script sul server dovrebbe fare qualcosa di simile a:

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

La ragione per aggiungere il nome di una funzione per la risposta è che una richiesta JSONP è in realtà un tag script aggiunto al DOM piuttosto che una richiesta regolare che verrebbe fatta da un oggetto XMLHttpRequest. L'utilizzo di JSONP consente al browser di effettuare richieste tra domini che altrimenti verrebbero bloccate dal criterio dei domini che si applica (per impostazione predefinita) a un XHR.

+0

risposta eccellente. solo una aggiunta. mi sembra che ci sia un errore ortografico di sintassi: la parentesi graffa è nel posto sbagliato. deve essere stampato "{$ _REQUEST ['callback'] ({$ JSON})};"; – heximal

+0

Qui le parentesi vengono utilizzate dal PHP per interpolare le variabili in una stringa, quindi '{$ _REQUEST ['callback']} ({$ JSON});' verrà stampato come 'someCallback ({" my ":" JSON "})' nell'output risultante, assumendo che '$ _REQUEST ['callback']' era 'someCallback' e' $ JSON' era equivalente a 'array (" mio "=>" JSON ")' – steveukx

+0

ah, I vedi, hai ragione. queste parentesi sono fondamentali quando si pianifica di incorporare variabili più complicate di solo $ JSON (in questo caso non sono richieste parentesi graffe) come un array nella stringa. – heximal

1

Se lo script AJAX è ospitato sullo stesso dominio, allora si può usare dataType: "json" come questo:

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

Se lo script AJAX è ospitato su un altro dominio allora il serverdeve restituire i dati JSONP - JSON dati avvolti all'interno di una chiamata di funzione:

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

Se i dati JSON nude restituisce del server quindi si ottiene l'analisi di errori perché un JSONP richieste è approssimativamente simile ad iniettare un tag <script src="...">. Per capire perché nudo oggetto JSON cause letterali Errore di analisi, prendere in considerazione questi esempi:

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