jquery - JQuery Ajax 读取 JSON 时出现问题

Question

我正在使用 JQuery 尝试读取 JSON，但总是以错误处理程序结束。当我检查 DOM 时，我看到的只是 statusText 下的“错误”，没有更多详细信息。我尝试将其保存到本地文件，并根据另一篇文章添加了 beforeSend 部分来解决潜在的 MIME 问题。当我在浏览器中打开 url 时，它确实会生成有效的 JSON。

$.ajax({
type : "GET",
url : "http://maps.googleapis.com/maps/api/geocode/json?latlng=40.714224,-73.961452&sensor=true",
beforeSend : function(x) {
    if (x && x.overrideMimeType) {x.overrideMimeType("application/j-son;charset=UTF-8");}},
dataType : "application/json",
success : function(data) {
    alert("success" + data)},
error : function(y) {alert("failure" + y.statusText);}

});

Answer 1

你的代码没有任何问题。出现此问题的原因是您正在尝试执行跨域 AJAX 请求。然而，并不是一切都失去了，因为谷歌提供了他们的 Google Maps Javascript API V3 Services - 客户端地理编码 API。

以下完整代码示例(已测试且有效)将使您能够访问所需的 JSON 对象。在此示例中，警报框将显示“Williamsburg, NY, USA” - 第一个 formatted_address。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript">
$(document).ready(function() {
    var geocoder = new google.maps.Geocoder();
    var input = "40.714224,-73.961452";
    var latlngStr = input.split(",", 2);
    var lat = parseFloat(latlngStr[0]);
    var lng = parseFloat(latlngStr[1]);
    var latlng = new google.maps.LatLng(lat, lng);
    geocoder.geocode({ 'latLng': latlng }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            if (results[1]) {
                alert(results[1].formatted_address);
            }
        } else {
            alert("Geocoder failed due to: " + status);
        }
    });
});
</script>