使用JSONP的ajax调用返回未捕获的ReferenceError:没有定义jquery19102754115150310099_1392753827782

The following code is derived from an existing Knockout jsfiddle which does not work now, mostly due to being out of date with current versions of knockout and jquery. I found this fiddle listed as an example on the Knockout GitHub wiki recipes link: https://github.com/knockout/knockout/wiki/Asynchronous-Dependent-Observables.

下面的代码来自一个现有的Knockout jsfiddle，它现在不能使用了，主要是由于Knockout和jquery的当前版本过时了。我发现这个小提琴被列为敲除GitHub维基食谱链接的一个例子:https://github.com/knockout/knockout/knockout/wiki/asynchronous - dependent - observables。

The fiddle in this link does not work, even after I did some updating of the code. I am weak on the Ajax call and need help with understanding why this does not work.

这个链接中的小提琴不起作用，即使我对代码做了一些更新。我不擅长Ajax调用，需要帮助理解为什么它不能工作。

The original fiddle is listed in the link http: //jsfiddle.net/uv5AG/

原始的小提琴在链接http: // jsfiddle.net/uv5ag/中列出

I have modified it in a new jsfiddle which is more up-to-date and works except for the AJAX call. It is found at : http://jsfiddle.net/n4gy3/Gf3gW/3/

我已经在一个新的jsfiddle中对它进行了修改，它是最新的，除了AJAX调用之外，它还可以工作。可以在http://jsfiddle.net/n4gy3/Gf3gW/3/找到

My use case is I want to use the features as documented in the GitHub site, to build a flexiable viewModel with knockout using the asyncDependentObservable. I have also tried this in a dotnet web site which give the same error, so this should not be related to jsfiddle odd way of handling cross site AJAX requests.

我的用例是，我想要使用GitHub站点上记录的特性，使用asyncDependentObservable来构建一个具有knockout的可伸缩性viewModel。我还在一个dotnet web站点上尝试过这种方法，它给出了相同的错误，因此这不应该与jsfiddle奇怪的跨站点AJAX请求处理方式有关。

I believe the major issue is the code throws an exception when running the following ajax request.

我认为主要的问题是代码在运行以下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]; });

I modified the chaining of the pipe() method, and replaced with then(), because pipe was deprecated in later version of JQuery.

我修改了pipe()方法的链接，并将其替换为then()，因为在JQuery的后续版本中，并不赞成使用pipe。

looking at the results from the ajax call it appears to run successful and jquery returns the following, which javascript tries to execute and this appears to throw the error. It might be the problem is .then() is not the correct way to fix the example. I have noticed that the then block never executes. If I replace with completed() it does execute but I get the same error. I am confused.

查看运行成功的ajax调用的结果，jquery返回以下内容，javascript试图执行这些内容，这似乎抛出了错误。问题可能是then()并不是修复示例的正确方法。我注意到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"}]])

1 个解决方案

#1

Take a very close look at the url being generated and the response. The url is:

仔细查看生成的url和响应。网址是:

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

and the response is:

和响应:

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

Notice how the url has jQuery210 and the response is jquery210? that's where the error is, javascript is case sensitive. The API is failing to return the callback name requested, and is instead returning it in all lowercase. To solve this, simply specify your own callback name in all lowercase.

注意url如何有jQuery210，响应是jQuery210 ?这就是错误所在，javascript是区分大小写的。API未能返回所请求的回调名称，而是将其返回所有小写。要解决这个问题，只需用小写指定您自己的回调名称。

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

Now the url will be:

现在的url将是:

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

I suggest also contacting the developers behind the api and informing them of this... bug.

我还建议联系api背后的开发人员，告诉他们这一点……bug。

#1