2012-04-10 30 views
5

Tengo un problema con mi solicitud JSONP .. no se mostrarán Los datos, Firebug muestra una "etiqueta válido" .."etiqueta no válida" cuando se usa JSONP?

enter image description here

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

Mi JSON:

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

Mi 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 solicitud funciona bien, pero de todos modos no se muestran los datos.

enter image description here

Im en busca de una solución para el día .. ¿Puede alguien ayudarme? ¡Gracias de antemano!

SOLUCIÓN (actualización: 06.09.12)

He resuelto este problema. El servidor (interfaz REST) ​​en la que se ejecute había puesto en práctica ninguna función de devolución de llamada de la .. Otra forma de configurar las solicitudes crossdomain SIN utilizar JSONP es establecer la siguiente variable de jQuery:

jQuery.support.cors = true; 
+1

Esto se debe a JSON * no * es un programa de JS válido pero que está tratando de ser utilizado como una sola. Descubra por qué el JSONP no funciona como se esperaba. (Por cierto, 'getRessources' parece una falta de ortografía.) –

+0

la solicitud funciona bien ..He agregado una imagen con la respuesta. – P4tR

+2

La respuesta no es JSONP, es JSON. Se supone que las respuestas de JSONP se envuelven dentro de una llamada de función como 'callback ({" foo ":" bar "})' –

Respuesta

7

la respuesta a una llamada JSONP necesita envolver el JSON mismo en una llamada a función, donde el nombre de la función que se llama generalmente se proporciona en la url. jQuery añade automáticamente un parámetro de cadena de consulta de "devolución de llamada" a la URL que se solicita, por lo que la secuencia de comandos en el servidor debe hacer algo similar a:

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

La razón para añadir el nombre de una función a la respuesta es que una solicitud JSONP es en realidad una etiqueta de secuencia de comandos añadida al DOM en lugar de una solicitud normal que realizaría un objeto XMLHttpRequest. El uso de JSONP permite que el navegador realice solicitudes entre dominios que de lo contrario estarían bloqueadas por la política de dominios cruzados que se aplica (de manera predeterminada) a un XHR.

+0

excelente respuesta. solo una adición. me parece que hay una falta de ortografía de la sintaxis: el corsé de cierre está en el lugar equivocado. debe imprimirse "{$ _REQUEST ['callback'] ({$ JSON})};"; – heximal

+0

Aquí las llaves están siendo usadas por PHP para interpolar variables en una cadena, por lo que '{$ _REQUEST ['callback']} ({$ JSON});' se imprimiría como 'someCallback ({" my ":" JSON "})' en el resultado resultante, asumiendo que '$ _REQUEST ['callback']' era 'someCallback' y' $ JSON' era equivalente a 'array (" my "=>" JSON ")' – steveukx

+0

ah, yo mira, tienes razón estos refuerzos son fundamentales cuando planea incorporar variables más complicadas que solo $ JSON (en este caso no se requieren llaves) como una matriz en la cadena. – heximal

1

Si el script AJAX se encuentra alojado en mismo dominio, puede utilizar dataType: "json" así:

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

Si el script AJAX está alojado en otro dominio entonces el servidor debe devolver datos JSONP - JSON datos envueltos dentro de una llamada de función:

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

Si el servidor devuelve datos JSON desnudas por lo que recibirá errores de análisis debido a las peticiones JSONP es más o menos similar a la inyección de una etiqueta <script src="...">. Para entender por qué desnuda objeto JSON causas literales Error de análisis, tenga en cuenta estos ejemplos:

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