使用JSONP的ajax調用返回錯誤未捕獲的ReferenceError：jquery19102754115150310099_1392753827782未定義

Question

以下代碼是從現有的Knockout jsfiddle派生而來的，它現在不起作用，主要是由於當前版本的knockout和jquery過時了。我發現這個小提琴在Knockout GitHub維基食譜鏈接上列舉爲一個例子：https://github.com/knockout/knockout/wiki/Asynchronous-Dependent-Observables。

這個鏈接中的小提琴不起作用，即使我做了一些代碼更新。我在Ajax調用方面很弱，需要幫助理解爲什麼這不起作用。

原來的小提琴被列在連結http：//jsfiddle.net/uv5AG/

我已經在一個新的jsfiddle這是更先進的日期，除AJAX調用工作修改它。它在：http://jsfiddle.net/n4gy3/Gf3gW/3/

我的用例是我想使用GitHub站點中記錄的功能，使用asyncDependentObservable構建一個靈活的viewModel與淘汰賽。我也曾在一個給出相同錯誤的dotnet網站上嘗試過，所以這不應該與jsfiddle處理跨站點AJAX請求的奇怪方式有關。

我相信主要的問題是運行下面的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]; }); 

我修改了管（）方法的鏈接，並用然後（）取代，因爲管是在後來的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"... 

通知的URL如何有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後面，通知他們這個...錯誤。