使用 success/jsonpCallback 与 ajax 请求

Question

我正在使用 Netflix 的 OData API 开发一个应用程序。我关注了 Stephen Walther 的博客条目 了解如何查询 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 行，应用程序就可以正常工作。我的问题是：从 ajax 调用中保留 success 代码行是否有问题？或者为什么需要同时包含 jsonpCallback 和 success 行？我问这个主要是出于好奇，因为应用程序似乎在没有两条回调线的情况下工作正常。

Answer 1

根据您的代码尝试执行的操作，我不确定为什么您在 $.ajax 中同时指定 jsonpCallback 和 success称呼。我建议您只指定success 以便处理您的数据并处理您的分页。让 jQuery 定义 jsonp 回调的名称。

本质上，jsonp 回调所做的是从 WCF 数据服务接收有效负载，然后将其传递给成功处理程序。如果您想在 success 处理程序处理数据之前对数据进行一些缓存或其他预处理，您似乎可以使用 jsonpCallback 。我不确定为什么在这种情况下您要指定与 jsonpCallback 和 success 处理程序相同的函数。 （我简要浏览了您链接到的 Stephen 的文章，我不是他这样做的原因。）

下面是对 WCF 数据服务的示例 jsonp 调用，我在演示和演讲中使用了该服务（并且已经使用了一段时间） ）。我使用 JSONPSupportBehaviorAttribute 来在我的 WCF 数据服务中启用 JSONP（不确定您是否正在使用该属性）。

但在我的示例代码中，我没有指定 jsonpCallback 名称；我只是指定 jsonp 查询字符串参数（必须是 $callback 而不是默认的 callback），但我让 jQuery 命名 jsonp 回调函数。

我的 success 处理程序被调用一次，一切正常。所以我的建议是忘记 jsonpCallback ，保留您的成功处理程序，我认为事情应该开始更好地工作。

我希望这有帮助。如果您有后续问题，请告诉我。祝你好运！

$.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>");
        });
    }
});

Answer 2

不要定义回调，因为 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 返回。