使用JSONP调用ajax返回错误Uncaught ReferenceError：未定义jquery19102754115150310099_1392753827782

以下代码派生自现有的Knockout jsfiddle，它现在不起作用，主要是由于当前版本的knockout和jquery已经过时了。 我发现这个小提琴作为Knockout GitHub wiki食谱链接的一个例子列出： https ： //github.com/knockout/knockout/wiki/Asynchronous-Dependent-Observables 。

即使在我对代码进行了一些更新之后，此链接中的小提示也不起作用。 我在Ajax调用上很弱，需要帮助才能理解为什么这不起作用。

最初的小提琴列在链接http：//jsfiddle.net/uv5AG/

我已经在一个新的jsfiddle中修改了它，它更新，并且除了AJAX调用之外还可以工作。 它位于： http ： //jsfiddle.net/n4gy3/Gf3gW/3/

我的用例是我想使用GitHub站点中记录的function，使用asyncDependentObservable构建一个带有knockout的灵活viewModel。 我也在一个dotnet网站上尝试了这个，它给出了同样的错误，所以这不应该与处理跨站点AJAX请求的jsfiddle奇怪的方式有关。

我认为主要问题是代码在运行以下ajax请求时抛出exception。

self.fetchedData = asyncDependentObservable(function () { return $.ajax("http://api.worldbank.org/country?prefix=?", { dataType: "jsonp", data: { per_page: this.numberToShow, region: this.chosenRegion, format: "jsonp" } }).pipe(function (results) { console.log(results); debugger; return results[1]; }); 

我修改了pipe（）方法的链接，并替换为then（），因为在更高版本的JQuery中不推荐使用管道。

查看来自ajax调用的结果它似乎运行成功并且jquery返回以下内容，javascript尝试执行，这似乎抛出错误。 可能是问题是.then（）不是修复示例的正确方法。 我注意到那个块永远不会执行。 如果我用completed（）替换它确实执行但我得到相同的错误。 我很迷惑。

 jquery19102754115150310099_1392753827782([{"page": 1,"pages": 22,"per_page": "10","total": 214}, [{"id": "ABW","iso2Code": "AW","name": "Aruba","region": {"id": "LCN","value": "Latin America & Caribbean (all income levels)"},"adminregion": {"id": "","value": ""},"incomeLevel": {"id": "NOC","value": "High income: nonOECD"},"lendingType": {"id": "LNX","value": "Not classified"},"capitalCity": "Oranjestad","longitude": "-70.0167","latitude": "12.5167"}, {"id": "AFG","iso2Code": "AF","name": "Afghanistan","region": {"id": "SAS","value": "South Asia"},"adminregion": {"id": "SAS","value": "South Asia"},"incomeLevel": {"id": "LIC","value": "Low income"},"lendingType": {"id": "IDX","value": "IDA"},"capitalCity": "Kabul","longitude": "69.1761","latitude": "34.5228"}, {"id": "AGO","iso2Code": "AO","name": "Angola","region": {"id": "SSF","value": "Sub-Saharan Africa (all income levels)"},"adminregion": {"id": "SSA","value": "Sub-Saharan Africa (developing only)"},"incomeLevel": {"id": "UMC","value": "Upper middle income"},"lendingType": {"id": "IDB","value": "Blend"},"capitalCity": "Luanda","longitude": "13.242","latitude": "-8.81155"}, {"id": "ALB","iso2Code": "AL","name": "Albania","region": {"id": "ECS","value": "Europe & Central Asia (all income levels)"},"adminregion": {"id": "ECA","value": "Europe & Central Asia (developing only)"},"incomeLevel": {"id": "UMC","value": "Upper middle income"},"lendingType": {"id": "IBD","value": "IBRD"},"capitalCity": "Tirane","longitude": "19.8172","latitude": "41.3317"}, {"id": "AND","iso2Code": "AD","name": "Andorra","region": {"id": "ECS","value": "Europe & Central Asia (all income levels)"},"adminregion": {"id": "","value": ""},"incomeLevel": {"id": "NOC","value": "High income: nonOECD"},"lendingType": {"id": "LNX","value": "Not classified"},"capitalCity": "Andorra la Vella","longitude": "1.5218","latitude": "42.5075"}, {"id": "ARE","iso2Code": "AE","name": "United Arab Emirates","region": {"id": "MEA","value": "Middle East & North Africa (all income levels)"},"adminregion": {"id": "","value": ""},"incomeLevel": {"id": "NOC","value": "High income: nonOECD"},"lendingType": {"id": "LNX","value": "Not classified"},"capitalCity": "Abu Dhabi","longitude": "54.3705","latitude": "24.4764"}, {"id": "ARG","iso2Code": "AR","name": "Argentina","region": {"id": "LCN","value": "Latin America & Caribbean (all income levels)"},"adminregion": {"id": "LAC","value": "Latin America & Caribbean (developing only)"},"incomeLevel": {"id": "UMC","value": "Upper middle income"},"lendingType": {"id": "IBD","value": "IBRD"},"capitalCity": "Buenos Aires","longitude": "-58.4173","latitude": "-34.6118"}, {"id": "ARM","iso2Code": "AM","name": "Armenia","region": {"id": "ECS","value": "Europe & Central Asia (all income levels)"},"adminregion": {"id": "ECA","value": "Europe & Central Asia (developing only)"},"incomeLevel": {"id": "LMC","value": "Lower middle income"},"lendingType": {"id": "IDB","value": "Blend"},"capitalCity": "Yerevan","longitude": "44.509","latitude": "40.1596"}, {"id": "ASM","iso2Code": "AS","name": "American Samoa","region": {"id": "EAS","value": "East Asia & Pacific (all income levels)"},"adminregion": {"id": "EAP","value": "East Asia & Pacific (developing only)"},"incomeLevel": {"id": "UMC","value": "Upper middle income"},"lendingType": {"id": "LNX","value": "Not classified"},"capitalCity": "Pago Pago","longitude": "-170.691","latitude": "-14.2846"}, {"id": "ATG","iso2Code": "AG","name": "Antigua and Barbuda","region": {"id": "LCN","value": "Latin America & Caribbean (all income levels)"},"adminregion": {"id": "","value": ""},"incomeLevel": {"id": "NOC","value": "High income: nonOECD"},"lendingType": {"id": "IBD","value": "IBRD"},"capitalCity": "Saint John's","longitude": "-61.8456","latitude": "17.1175"}]]) 

Answer 1

仔细查看生成的URL和响应。 url是：

 http://api.worldbank.org/country?prefix=jQuery2100915805617813021_1392757688413&per_page=10&region=WLD&format=jsonp&_=1392757688414 

并且响应是：

 jquery2100915805617813021_1392757688413([{"page":1,"pages"... 

注意url是如何有jQuery210 ，响应是jquery210 ？ 这就是错误所在，javascript区分大小写。 API无法返回所请求的回调名称，而是全部以小写forms返回。 要解决此问题，只需以全部小写指定您自己的回调名称即可。

 $.ajax("http://api.worldbank.org/country?prefix=?", { jsonpCallback: "myjsonpcallbacknameinalllowercase", dataType: "jsonp", 

现在url将是：

 http://api.worldbank.org/country?prefix=myjsonpcallbacknameinalllowercase&per_page=10&region=WLD&format=jsonp&_=1392757688414 

我建议还联系api背后的开发人员并通知他们这个… bug。