"Etiqueta inválida" con jquery y jsonp (dominio cruzado)

Question

Estoy tratando de obtener datos de un servidor remoto usando jsonp y estoy teniendo algunos problemas. primero tuve problemas con el problema de autenticación pero (creo) está bien ahora. De todas formas, estoy consiguiendo un error "no válida etiqueta" en la firebug al probar mi código que se parece a lo siguiente:

$(function() { 
var url = 'http://lifeloopdev.info/get_events?callback=?'; 
    $.ajax(url, { 
     dataType: "jsonp", 
     data: "offset=0&num_items=10", 
     username: 'username', 
     password: 'password', 
     jsonp: 'successCallback' 
    }); 
}); 

function successCallback(data) { 
    $.each(data.success, function(i,item){ 
     $("body").append('<h1>' + item.title + '</h1>'); 
    }); 
}; 

También he intentado sin éxito la función (en lugar de jsonp: 'successCallback') :

success: function(data) { 
     successCallback(data); 
    } 

mi archivo JSON:

{"success":[{"id":1,"title":"title 1"},{"id":2,"title":"title 2"},{"id":3,"title":"title 3"}]} 

parece que la función ajax obtiene los datos, sino que tienen dificultades para analizarlo o algo por el estilo.

Estaré más que contento si me puede ayudar con esto, pasé las últimas 4 horas tratando de resolverlo sin éxito. Muchas gracias por tu tiempo ayudándome.

Aviram.

Answer 1

Me perdí algunas cosas a primera vista: donde ha especificado su archivo JSON, pensé que había dicho su respuesta JSON. La raíz de su problema es que la respuesta debe tener el formato callbackFunctionName(jsonData). Si no se rellena de esa manera, obtendrá el error invalid label en Firebug ya que jQuery intentará interpretar la respuesta como una llamada a una función, pero no habrá ningún nombre de función en la respuesta.

Su uso de $.ajax() para la función de devolución de llamada JSONP es ligeramente incorrecta en este momento y que está causando este problema. El valor asignado a jsonp indica el nombre del parámetro de cadena de consulta - esto debe coincidir con el nombre del parámetro que espera el servidor. En su caso, parece que el servidor espera el nombre del parámetro callback y no successCallback. No es la cadena que se utilizará en el JSON acolchado recibido. jsonpCallback puede especificar el nombre de esta función; se le debe asignar el valor de successCallback, si desea usar una función con nombre y no la función success.

---

Suponiendo que el servidor está a la espera del nombre de la función de devolución de llamada en el parámetro de consulta con nombre callback, el código debe ser uno de los siguientes:

1. Por defecto jQuery añadirá callback=? cuando no lo hace especifique una variable jsonp. Tenga en cuenta el uso de la función de devolución de llamada success en este fragmento de código. :

   $(function() { 
       var url = 'http://lifeloopdev.info/get_events'; 
       $.ajax(url, { 
        dataType: "jsonp", 
        data: "offset=0&num_items=10", 
        username: 'username', 
        password: 'password', 
        success: function(data){ 
         $.each(data.success, function(i,item){ 
          $("body").append('<h1>' + item.title + '</h1>'); 
         }); 
        } 
       }); 
   }); 
   

   La dirección URL que jQuery intentará obtener será http://lifeloopdev.info/get_events?offset=0&num_items=10&callback=jQuery152035532653917078266_4305276802416. Tenga en cuenta que la cadena callback es un nombre de parámetro de serie de consulta y su valor ha sido generado automáticamente por jQuery; esto invocará finalmente su función success.

   La respuesta debe ser similar jQuery152035532653917078266_4305276802416({"success":[{"id":1,"title":"title 1"},{"id":2,"title":"title 2"},{"id":3,"title":"title 3"}]})

2. Si desea utilizar un nombre de función de devolución de llamada personalizados, consulte el código de abajo:

   $(function() { 
       var url = 'http://lifeloopdev.info/get_events'; 
       $.ajax(url, { 
        dataType: "jsonp", 
        data: "offset=0&num_items=10", 
        username: 'username', 
        password: 'password', 
        jsonpCallback: 'successCallback' 
       }); 
   }); 
   
   function successCallback(data) { 
       $.each(data.success, function(i,item){ 
        $("body").append('<h1>' + item.title + '</h1>'); 
       }); 
   }; 
   

   En este caso, la dirección URL que intentará jQuery GET será http://lifeloopdev.info/get_events?offset=0&num_items=10&callback=successCallback. Una respuesta adecuada hará que se invoque la función llamada successCallback.

   En este caso, la respuesta debe ser similar successCallback({"success":[{"id":1,"title":"title 1"},{"id":2,"title":"title 2"},{"id":3,"title":"title 3"}]})

Si el parámetro de cadena de consulta función de devolución de llamada es no ser identificado callback pero es algo así como cbfunc lugar, tendrá que añadir jsonp : 'cbfunc' a su llamada $.ajax().

Answer 2

¿En realidad Relleno de su JSON serverside respuesta a convertir en jsonp? es decir, en lugar de JSON como:

{"success":[{"id":1,"title":"title 1"},{"id":2,"title":"title 2"},{"id":3,"title":"title 3"}]} 

que debe regresar

callback({"success":[{"id":1,"title":"title 1"},{"id":2,"title":"title 2"},{"id":3,"title":"title 3"}]}); 

donde "devolución de llamada" es el valor del parámetro de cadena de consulta de devolución de llamada pasa al servidor. Jquery genera automáticamente esto a menos que suministre la configuración jsonpCallback.

Asimismo, no pienso necesidad de poner el "? Devolución de llamada =?" en su URL, ya que creo que jquery lo agrega automáticamente.

Plus, jsonp: successCallback está diciendo Jquery para reemplazar devolución de llamada =?? con successCallback - Pero no creo que esto sea lo que realmente intentas aquí. Probablemente USTED quiera usar "success: function (data) ..."

Puede valer la pena tener una lectura cuidadosa de los documentos jquery en ajax and jsonp.