带有Ajax问题的JSONP跨域请求

Question

I'm trying to use IPInfoDB to obtain the IP geolocation in an application but I'm having issues that I can't resolve. 我正在尝试使用IPInfoDB来获取应用程序中的IP地理位置，但遇到了无法解决的问题。 I created a HTML file and did the very basic requirements to get the info from IPInfoDB and it works fine. 我创建了一个HTML文件，并做了非常基本的要求，以便从IPInfoDB获取信息，并且工作正常。 When I try to run the exact same code inside the application it gives the error "Failed to load resource" in the console on the first attempt and then any attempts after that throw a GET error pointing to the jquery file on line 8516 (developer version of jquery-1.10.2.js). 当我尝试在应用程序中运行完全相同的代码时，第一次尝试在控制台中给出错误“ Failed to load resource”，然后在此之后的任何尝试都抛出GET错误，该错误指向第8516行上的jquery文件（开发人员版本） jquery-1.10.2.js）。 Any help would be greatly appreciated. 任何帮助将不胜感激。 Below is the code that works perfectly in the html file but throws an error when inside the application. 下面的代码可以完美地在html文件中运行，但是在应用程序内部时会引发错误。

<!DOCTYPE html>
<html>
<head>

<style>
.IPinfoTableDiv
{
    width:900px;
    margin:auto;
}
.IPinfoTable
{
    width:100%;
}
table thead tr td, table tbody tr td
{
    border: solid 1px lightgrey;
}
</style>

<script src="jquery-1.10.2.js"></script>

<script>
var geoLocationUrl = 'http://api.ipinfodb.com/v3/ip-city/?key=MyKey&format=json';

$(document).ready(function() 
{
function handleData(data)
{
    var newTR = $("<tr/>")
    .append($('<td/>').text(data.cityName))
    .append($('<td/>').text(data.countryCode))
    .append($('<td/>').text(data.countryName))
    .append($('<td/>').text(data.ipAddress))
    .append($('<td/>').text(data.latitude))
    .append($('<td/>').text(data.longitude))
    .append($('<td/>').text(data.regionName))
    .append($('<td/>').text(data.timeZone))
    .append($('<td/>').text(data.zipCode));

    $("#IPInfoBody").append(newTR);
}

jQuery.ajax(
{
    type : 'GET',
    url : geoLocationUrl,
    crossDomain: true,
    dataType : 'jsonp',
    success : function(data)
    {
        console.log("Success");
        console.log(data);
        handleData(data);
    }
});
});
</script>
</head>
<body>
<div class="IPinfoTableDiv">
<table>
    <thead>
        <tr>
            <td>City</td>
            <td>Country Code</td>
            <td>Country Name</td>
            <td>IP Address</td>
            <td>Latitude</td>
            <td>Longitude</td>
            <td>Region</td>
            <td>Time Zone</td>
            <td>Zipcode</td>
        </tr>
    </thead>
    <tbody id="IPInfoBody">
    </tbody>
</table>
</div>
</body>
</html>

I noticed the first time I attempt to load the page in the application and it throws the "Failed to load resources" it gives a link, which, when opened brings up the JSON that I want to use. 我注意到，第一次尝试在应用程序中加载页面时，它抛出“无法加载资源”，它提供了一个链接，当打开该链接时，会弹出我要使用的JSON。 Attached are images to show what i'm talking about. 随附的图片显示了我在说什么。

Initial Failure with link: 链接初始失败： 初始故障

Clicking the link brings up the JSON that I want: 单击链接将显示我想要的JSON： JSON连结

GET error pointing at jquery file line 8516 if I attempt more than once: 如果多次尝试，指向jQuery文件第8516行的GET错误： 在此处输入图片说明

I am reading up on JSONP and am having trouble understanding it. 我正在阅读JSONP，但无法理解它。 I read something about it returns the data wrapped in a function, which is what I'm assuming is what is in the link in the second picture. 我读到一些有关它返回包装在函数中的数据的信息，这是我假设的是第二张图片中的链接中的内容。 I am not sure why the normal HTML page works fine but the application fails to load the resource on the initial attempt and then just has a GET error that points to jQuery. 我不确定为什么正常的HTML页面可以正常运行，但是应用程序在初次尝试时无法加载资源，然后出现指向jQuery的GET错误。 The application is in an eclipse environment using tomcat to serve it. 该应用程序在使用tomcat的Eclipse环境中提供服务。

UPDATE: In Firefox, it works fine (in the application as well). 更新：在Firefox中，它工作正常（在应用程序中也是如此）。 In Google Chrome, not so much. 在谷歌浏览器中，没有那么多。 I'll look into that more and see if I can determine why that is and update accordingly. 我将对此进行更多调查，看看是否可以确定原因并进行相应更新。

UPDATE 2: So I've tested in Firefox and IE(10) and both of those have no issues. 更新2：因此，我已经在Firefox和IE（10）中进行了测试，并且两者都没有问题。 It seems to be specific to Chrome. 它似乎特定于Chrome。 Even using the jsfiddle that Kevin B posted, the issue only occurs in chrome. 即使使用Kevin B发布的jsfiddle，该问题也仅发生在chrome中。

Answer 1

The problem ended up being the AdBlock Plus extension blocking the JSONP from loading for some reason. 问题最终是由于某种原因，AdBlock Plus扩展阻止了JSONP的加载。 Once I disabled AdBlock Plus, everything works fine in Chrome. 停用AdBlock Plus后，Chrome即可正常运行。

带有Ajax问题的JSONP跨域请求

问题描述

1 个解决方案

解决方案1
0 已采纳 2013-10-30 20:51:06

带有Ajax问题的JSONP跨域请求

问题描述

1 个解决方案

解决方案1 0 已采纳 2013-10-30 20:51:06

解决方案1
0 已采纳 2013-10-30 20:51:06