«Недопустимая метка» с jquery и jsonp (междоменная) - PullRequest
Новая
       7

«Недопустимая метка» с jquery и jsonp (междоменная)

5 голосов
/ 19 мая 2011

Я пытаюсь получить данные с удаленного сервера, используя jsonp, и у меня возникли некоторые проблемы. Сначала у меня были проблемы с аутентификацией, но (я думаю) теперь все в порядке. В любом случае, я получаю ошибку "Invalid Label" на firebug при попытке проверить мой код, который выглядит так: 

$(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>');
    });
};

Я также пробовал это без функции успеха (вместо jsonp: 'successCallback'): 

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

мой файл json: 

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

Кажется, что функция ajax получает данные, но с трудностями при их разборе или чем-то в этом роде.

Я буду более чем счастлив, если вы поможете мне с этим, я провел последние 4 часа, пытаясь понять это безуспешно. Большое спасибо за то, что уделили мне время.

Aviram.

Ответы [ 2 ]

10 голосов
/ 19 мая 2011

Я пропустил некоторые вещи с первого взгляда - там, где вы указали свой JSON-файл, я думал, что вы сказали свой ответ JSON. Корень вашей проблемы в том, что ответ должен иметь форму callbackFunctionName(jsonData). Если он не заполнен таким образом, вы получите ошибку invalid label в Firebug, поскольку jQuery попытается интерпретировать ответ как вызов функции, но в ответе не будет никакого имени функции.

Использование $.ajax() для функции обратного вызова JSONP сейчас немного некорректно, и это вызывает эту проблему. Значение, присвоенное jsonp, указывает имя параметра строки запроса - оно должно соответствовать имени параметра, ожидаемого сервером. В вашем случае, похоже, что сервер ожидает имя параметра callback, а не successCallback. Это не строка, которая будет использоваться в дополненном JSON-файле. jsonpCallback может указать имя этой функции - ей следует присвоить значение successCallback, если вы хотите использовать именованную функцию, а не функцию success.

Если сервер ожидает имя функции обратного вызова в параметре запроса с именем callback, ваш код должен быть одним из следующих:

  1. По умолчанию jQuery добавит callback=?, если вы не укажете переменную jsonp. Обратите внимание на использование функции обратного вызова success в этом фрагменте кода. : 

    $(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>');
            });
        }
    });  
});

    URL, который jQuery попытается получить, будет http://lifeloopdev.info/get_events?offset=0&num_items=10&callback=jQuery152035532653917078266_4305276802416. Обратите внимание, что строка callback является именем параметра строки запроса, и ее значение было автоматически сгенерировано jQuery - это, наконец, вызовет вашу функцию success.

    Ответ должен выглядеть следующим образом: jQuery152035532653917078266_4305276802416({"success":[{"id":1,"title":"title 1"},{"id":2,"title":"title 2"},{"id":3,"title":"title 3"}]})

  2. Если вы хотите использовать имя пользовательской функции обратного вызова, см. Код ниже: 

    $(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>');
    });
};

    В этом случае URL, который jQuery попытается получить, будет http://lifeloopdev.info/get_events?offset=0&num_items=10&callback=successCallback. Правильный ответ вызовет функцию с именем successCallback.

    В этом случае ответ должен выглядеть следующим образом: successCallback({"success":[{"id":1,"title":"title 1"},{"id":2,"title":"title 2"},{"id":3,"title":"title 3"}]})

Если параметр строки запроса функции обратного вызова имеет значение , а не с именем callback, но вместо этого он похож на cbfunc, вам нужно добавить jsonp : 'cbfunc' к вашему вызову $.ajax().

3 голосов
/ 19 мая 2011

Вы действительно добавляете свой сервер ответов json, чтобы он превратился в jsonp? то есть вместо json вроде: 

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

вы должны возвращаться 

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

где "обратный вызов" - это значение параметра строки запроса обратного вызова, передаваемого на сервер. Jquery генерирует это автоматически, если вы не укажете параметр jsonpCallback.

Я также не думаю, что вам нужно ставить "? Callback =?" в вашем URL, как я считаю, jquery добавляет это автоматически.

Кроме того, jsonp: successCallback сообщает Jquery о замене? Callback =? with successCallback - Но я не думаю, что это то, что вы на самом деле намереваетесь здесь. Вы, вероятно, хотите использовать «success: function (data) ...»

Возможно, стоит внимательно прочитать документы jquery на ajax и jsonp .

...