jQuery: запрашивается помощь по getJSON + SunlightLabs API

Question

У меня возникают проблемы при извлечении определенного элемента из вызова API с помощью функции getJSON jQuery. Я пытаюсь использовать API конгресса SunlightLab для получения конкретной информации о законодателях. В приведенном ниже примере я пытаюсь получить сайт законодателя:

$.getJSON("http://services.sunlightlabs.com/api/legislators.get.json?apikey=[api key]&lastname=Weiner&jsonp=?" ,  function(data) {

    alert("hello from sunlight");
    alert(data.response.legislator.website);

}); 

Используя приведенный выше код, появляется первое предупреждение, но второе предупреждение даже не появляется. Я понимаю, что getJSON должен использовать JSONP в этом случае, и я думаю, что я настроил это правильно, заканчивая мой URL '&jsonp=?'.

Помещение URL в мою функцию getJSON в веб-браузер дает мне следующее:

? ({"response": {"законодатель": {"веб-сайт": "http://weiner.house.gov/", "факс": "202-226-7253", ... и т. д.

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

Answer 1

Используемый вами URL устанавливает обратный вызов JSONP равным ?, что означает его внедрение функции JavaScript под названием ? с аргументом объекта JavaScript. Это неверно. Таким образом, запрос выполняется, но определенная вами функция-оболочка не вызывается (и недействительна).

Вы можете изменить URL, чтобы его jsonp=callback (или другое имя функции-обработчика), а затем определите функцию с именем callback это обрабатывает аргумент, который ожидает объект.

Один из способов (автоматического) запуска поддержки JSONP в jQuery - переключить ключ, который будет называться "обратный вызов", чтобы он сигнализировал jQuery, что вы выполняете вызов JSONP. т.е. callback=callback,

РЕДАКТИРОВАТЬ: Как указывает Drackir, jQuery предоставляет настройки в $.ajax чтобы позволить ему определить свое собственное имя функции обратного вызова, но вы должны сообщить ему, что это вызов JSONP, установив dataType: 'jsonp' в $.ajax вызов.

Answer 2

Вопросительный знак существует потому, что вы указали функцию обратного вызова JSONP? в вашей строке запроса (т.е. &jsonp=?). Из-за проблем безопасности (в частности, политики того же происхождения) вы не можете сделать запрос AJAX для сайта за пределами того же домена, что и страница, на которой вы находитесь. Чтобы обойти это, JSONP работает путем создания тега сценария, в котором для SRC задан URL-адрес сценария на другом сайте. Это загрузит внешний файл JavaScript и запустит любой код. Теперь, чтобы связать этот внешний код с вашим JavaScript, внешний API принимает имя вызываемой функции (&jsonp=functionnametocall). Возвращенный JavaScript вызывает эту функцию и передает данные, которые он пытается вернуть в качестве объекта JSON, в качестве первого аргумента.

Итак, причина, по которой вы видите знак вопроса, когда вы идете туда, заключается в том, что вы передаете знак вопроса в параметре строки запроса jsonp. jQuery автоматически преобразует знак вопроса в URL, например http://www.test.com/api/apikey=292929&callback=? к уникально названной функции. Это выполняется в фоновом режиме с помощью jQuery, поэтому вам не нужно об этом думать.

Тем не менее, я не знаю, обнаруживает ли jQuery, является ли имя параметра обратного вызова чем-то отличным от callback=?, $.getJSON() однако это короткая форма для дольше:

$.ajax({
  url: url,
  dataType: 'json',
  data: data,
  success: callback
});

Я предлагаю вам попробовать использовать $.ajax() прямо и установить jsonp установка равна "jsonp", Это говорит $.ajax() метод, который называется параметром строки запроса jsonp и не callback, Так вот так по сути:

$.ajax({
  url: url,
  dataType: 'json',
  data: data,
  success: callback,
  jsonp:"jsonp"
});

Дополнительная информация: $.getJSON | $.ajax ()

Answer 3

Хорошо, хорошо, так что это было довольно простое исправление, добавив строку к примеру, приведенному @Drackir. Недостающий кусок был "cache: true" в настройках ajax. Окончательный рабочий код выглядел так:

$.ajax({
         url: 'http://services.sunlightlabs.com/api/legislators.get.json?apikey=[api key]7&lastname=Weiner',
         dataType: 'jsonp',
         cache: true,
         jsonp: 'jsonp',
         success: function(data) {
             alert("hello from ajax") ;
             alert(data.response.legislator.website);
         }

    });

Я не уверен, почему в этом случае требуется "cache: true". Спасибо за помощь.