我正在使用他们的OData API为Netflix开发一个应用程序。我跟着Stephen Walther's blog entry了解了如何查询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
行?我主要是出于好奇而问这个问题,因为没有两个回调线,应用程序似乎工作正常。
答案 0 :(得分:4)
不要定义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返回。
答案 1 :(得分:3)
根据您的代码尝试执行的操作,我不确定您在jsonpCallback
来电中同时指定success
和$.ajax
的原因。我建议您只需指定success
即可处理您的数据并处理您的分页。让jQuery定义你的jsonp回调的名称。
基本上jsonp回调正在做的是从WCF数据服务接收有效负载,然后将其交给成功处理程序。如果您希望在jsonpCallback
处理程序处理数据之前对数据进行一些缓存或其他预处理,则可以使用success
。在这种情况下,我不确定您为什么要指定与jsonpCallback
和success
处理程序相同的功能。 (我简要地查看了斯蒂芬关于你链接的文章,我不是他为什么这样做的。)
下面是我在演示和会话中使用的WCF数据服务的jsonp调用示例(并且已经使用了一段时间)。我使用JSONPSupportBehaviorAttribute
以便在我的WCF数据服务中启用JSONP(不确定这是否是您正在使用的)。
但在我的示例代码中,我没有指定jsonpCallback
名称;我只是指定jsonp
查询字符串参数(必须是$callback
而不是默认的callback
),但我让jQuery命名为jsonp回调函数。
我的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>");
});
}
});