Получение обратного вызова JSON не работает

Question

Я хочу использовать этот API, который возвращает место, соответствующее почтовому индексу

например. для почтового индекса 11233

http://postnummersok.se/api?q=11233

Я вызываю его с помощью пользовательского ввода, подобного этому, но результат не анализируется, как я могу устранить неполадки, он вообще получает обратный вызов? Мой firebug не показывает ошибок js.

$('#zip').live("keyup",function () {
    var zip = this.value.replace(/ /g,'');
    if(zip.length > 4) {
        var url = 'http://postnummersok.se/api?q=' + zip;
        $.getJSON(url, function(data) {
            $('#result').html(data);
        });
    } else {
         $('#result').html('to short');
    }
});

Answer 1

Я предполагаю, что документ, в котором находится ваш код, находится не на http://postnummersok.se. Если это не так, вы работаете с Same Origin Policy , которая (обычно) не позволяет ajax-запросам пересекать источники.

Если это общедоступная служба, они, вероятно, поддерживают JSON-P , которая не подпадает под действие SOP. JQuery также поддерживает его, так что это может быть так же просто, как изменить код из этого:

$.getJSON(url, function(data) {
    $('#result').html(data);
});

к этому

$.ajax({
    url:      url,
    dataType: "jsonp",
    success:  function(data) {
        $('#result').html(data);
    }
});

Подробнее в $.ajax документах.

---

Обновление : при комментировании другого ответа заметил, что вы динамически создаете строку запроса, но не кодируете параметр. Если zip содержит какие-либо символы, которые должны быть закодированы в URL, ваш URL будет испорчен. При создании строк запроса вы должны использовать encodeURIComponent:

var url = 'http://postnummersok.se/api?q=' + encodeURIComponent(zip);

... или просто передайте объект с парами ключ / значение в jQuery, который будет правильно сериализовать их для вас. Вот как это будет выглядеть, модифицируя мой вызов ajax выше:

$.ajax({
    url:      'http://postnummersok.se/api',
    data:     {q: zip},
    dataType: "jsonp",
    success:  function(data) {
        $('#result').html(data);
    }
});

---

Обновление 2 : Мне стало любопытно, и да, вам разрешено использовать этот сервис, и да, он использует JSON-P. От http://postnummersok.se/:

API

Vi har ett rest-api tillgängligt for alla. Skicka din sökfråga до http://postnummersok.se/api медицинский параметр q som antingen är ett postnummer eller en орт. Сварет коммер сом сомтт JSON-objekt. Callback-параметр разнородный обратный вызов.

... который Google переводит как

API

У нас есть остаточный API, доступный для всех. Отправьте запрос на http://postnummersok.se/api с параметром q, который является почтовым индексом или местом. Ответ приходит как объект JSON. Параметр обратного вызова с именем callback.

Однако служба не работает и возвращает недопустимые ответы JSON-P. Если вы отправите его

http://postnummersok.se/api?callback=myCallback&q=721+06

... ответ

myCallback(["V\u00c4STER\u00c5S"])myCallback(null)

... где это должно быть

myCallback(["V\u00c4STER\u00c5S"])

(возможно, с ; в конце.)

Так что я бы оставил им записку об ошибке на вашем месте.

Answer 2

Это не просто AJAX, а JSONP.

Вы можете сделать это так:

$('#zip').live("keyup",function () {
    var zip = this.value.replace(/ /g,'');
    if(zip.length > 4) {
        var url = 'http://postnummersok.se/api?callback=?';
        $.getJSON(url, { q: zip },
            function(data) {
                $('#result').html(data);
        });
    } else {
         $('#result').html('to short');
    }
});

Обратите внимание, что я добавил "callback =?"на URL, чтобы jQuery узнал, что это JSONP, и переместил zip в параметр data вызова.Подробнее см. документы .