Использование success / jsonpCallback с запросом ajax - PullRequest
Новая
       36

Использование success / jsonpCallback с запросом ajax

6 голосов
/ 24 августа 2011

Я разрабатываю приложение для Netflix, используя их OData API. Я следил за записью в блоге Стивена Уолтера о том, как запрашивать OData API. В нем он использует следующий код: 

$.ajax({
   dataType: "jsonp",
   url: query,
   jsonpCallback: "callback",
   success: callback
});

В моем приложении мне нужно использовать пейджинговые ссылки OData для получения полных списков. Мой код выглядит следующим образом: 

// create url and handle ajax call to Netflix
  function getTitles() {
    query = "http://odata.netflix.com/v2/Catalog" // netflix odata base url
    + "/Genres('Television')" // select Genre
    + "/Titles" // top-level resource
    + "?$select=NetflixApiId,Name,BoxArt,Synopsis,ReleaseYear,AverageRating,Series" // choose fields 
    + "&$orderby=Name" // Sort results by name
    + "&$filter=Instant/Available eq true"  // filter by instant view
    + " and Type eq 'Season'" // select only seasons
    + "&$expand=Series" // include series data
    + "&$callback=callback" // specify name of callback function
    + "&$format=json"; // json request
    $.ajax({
      dataType: "jsonp",
      url: query,
      jsonpCallback: "callback",
      success: callback,
      error: function(XHR, textStatus, errorThrown){
        alert(textStatus + ":" + errorThrown);
      } 
    });
  }

// create seasons array and and repeat ajax call until all results are returned 
  function callback(result) {
    seasons = seasons.concat(result["d"]["results"]);
    if (typeof result["d"]["__next"] != 'undefined') {
      var urlJSONP = result["d"]["__next"] + "&$callback=callback&$format=json";
      $.ajax({
        dataType: "jsonp",
        url: urlJSONP,
        jsonpCallback: "callback",
        success: callback,
        error: function(XHR, textStatus, errorThrown){
          alert(textStatus + ":" + errorThrown);
        } 
      });
    } else {
      processResults();
    }
  }

Однако, когда это работает, я продолжаю получать parserError. Похоже, что функция обратного вызова вызывается дважды. Если я уберу строку success: callback, приложение будет работать нормально. Мой вопрос: есть ли проблема с выходом строки кода success из вызова ajax? Или зачем было бы включать строки jsonpCallback и success? Я в основном спрашиваю об этом из любопытства, потому что приложение работает нормально без обеих строк обратного вызова.

Ответы [ 2 ]

4 голосов
/ 24 августа 2011

Не определяйте callback, потому что jQuery создает эту функцию для вас. Вот пример: jsFiddle : 

function getTitles() {
    query = "http://odata.netflix.com/v2/Catalog" // netflix odata base url
    + "/Genres('Television')" // select Genre
    + "/Titles" // top-level resource
    + "?$select=NetflixApiId,Name,BoxArt,Synopsis,ReleaseYear,AverageRating,Series" // choose fields 
    + "&$orderby=Name" // Sort results by name
    + "&$filter=Instant/Available eq true"  // filter by instant view
    + " and Type eq 'Season'" // select only seasons
    + "&$expand=Series" // include series data
    + "&$callback=?" // specify name of callback function
    + "&$format=json"; // json request
    $.ajax({
      dataType: "jsonp",
      url: query,
      success: callback,
      error: function(XHR, textStatus, errorThrown){
        alert(textStatus + ":" + errorThrown);
      } 
    });
  }

callback=? в основном просит jQuery обработать все возвраты JSONP.

3 голосов
/ 27 августа 2011

Исходя из того, что пытается сделать ваш код, я не уверен, почему вы указываете jsonpCallback и success в своем вызове $.ajax.Я бы посоветовал вам просто указать success для обработки ваших данных и обработки страниц.Позвольте jQuery определить имя вашего обратного вызова jsonp.

По сути, обратный вызов jsonp получает полезную нагрузку от службы данных WCF, а затем передает ее обработчику успеха.Похоже, вы могли бы использовать jsonpCallback, если вы хотите выполнить некоторое кэширование или другую предварительную обработку данных, прежде чем они будут обработаны вашим обработчиком success.Я не уверен, почему в этом случае вы указали бы ту же функцию, что и ваши обработчики jsonpCallback и success.(Я кратко просмотрел статью Стивена, на которую вы ссылались, и я не знаю, почему он это делает.)

Ниже приведен пример вызова jsonp к службе данных WCF, которую я использую в демонстрациях и беседах (и имеюиспользовал на некоторое время).Я использую JSONPSupportBehaviorAttribute, чтобы включить JSONP в моей службе данных WCF (не уверен, используете ли вы это или нет).

Но в моем примере кода я не указываю jsonpCallback название;Я просто указываю параметр строки запроса jsonp (должен быть $callback вместо значения по умолчанию callback), но я даю jQuery имя функции обратного вызова jsonp. Обработчик

My success вызывается один раз ивсе отлично работаетПоэтому я предлагаю забыть о jsonpCallback, оставить обработчик success на месте, и я думаю, что все должно начать работать лучше.

Надеюсь, это поможет.Дайте мне знать, если у вас есть дополнительные вопросы.Удачи! 

$.ajax({
    url: 'http://server:25812/Services/AgileWays.Baseball.Service.svc/Teams?$format=json&$filter=yearID eq 1882',
    type: 'GET',
    dataType: 'jsonp',
    cache: false,
    jsonp: '$callback',
    error: function (x, t, r) { alert(x.response.message); },
    success: function (data) {
        $.each(data.d.results, function (i, val) {
            $("#results").append("<div>" + val.name + "</div>");
        });
    }
});
...