Question

我正在尝试使用IPInfoDB来获取应用程序中的IP地理位置，但我遇到了无法解决的问题。我创建了一个HTML文件并完成了从IPInfoDB获取信息的基本要求，它运行正常。当我尝试在应用程序内运行完全相同的代码时，它在第一次尝试时在控制台中出现错误“无法加载资源”，然后在该行之后的任何尝试都会抛出指向8516行上的jquery文件的GET错误（开发人员版本） of jquery-1.10.2.js）。任何帮助将不胜感激。下面是在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>

我注意到我第一次尝试在应用程序中加载页面并抛出“无法加载资源”时会提供一个链接，当打开时会显示我想要使用的JSON。附上图片来展示我在说什么。

链接初始失败： InitialFailure

单击该链接会显示我想要的JSON： JSON link

如果我多次尝试，则指向jquery文件行8516的GET错误： enter image description here

我正在阅读JSONP并且无法理解它。我读了一些关于它返回包含在函数中的数据，这是我假设的是第二张图片中的链接。我不确定为什么普通的HTML页面工作正常，但应用程序无法在初始尝试时加载资源，然后只有一个指向jQuery的GET错误。应用程序在eclipse环境中使用tomcat来提供服务。

更新：在Firefox中，它工作正常（在应用程序中也是如此）。在谷歌浏览器中，并非如此。我会更多地研究它，看看我是否可以确定原因并相应地更新。

更新2：所以我已经在Firefox和IE（10）中进行了测试，两者都没有问题。它似乎特定于Chrome。即使使用Kevin B发布的jsfiddle，问题也只发生在chrome。

Answer 1

问题最终成为AdBlock Plus扩展程序因某些原因阻止JSONP加载。一旦我禁用了AdBlock Plus，Chrome中的一切工作正常。

带有Ajax问题的JSONP跨域请求

1 个答案: