Question

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

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

原始小提琴列在链接http：//jsfiddle.net/uv5AG /

我已经在一个新的jsfiddle中对它进行了修改，这个jsfiddle是最新的，除AJAX调用外都有效。它位于：http://jsfiddle.net/n4gy3/Gf3gW/3/

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

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

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

仔细查看正在生成的网址和响应。网址是：

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

，回复是：

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

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

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

现在网址将是：

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

我建议也请联系api背后的开发人员并告知他们这个...... bug。

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

1 个答案: