jquery .ajax（）方法失败

Question

谁能告诉我这个javascript可能有什么问题？

        $.ajax({
            cache:false,
            url: 'http://maps.googleapis.com/maps/api/geocode/json?address=1600+Amphitheatre+Parkway,+Mountain+View,+CA&sensor=false',
            success: function(data, textStatus, jqXHR) {
                console.log('success');
                console.log(data);
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.log('error');
                console.log(errorThrown);
                console.log(jqXHR);
            }
        });

调用'error'事件处理函数，这是我的控制台输出：

error
undefined
XMLHttpRequest { mozResponseArrayBuffer=ArrayBuffer, status=0, more...}

我正在尝试学习如何使用jquery进行ajax调用，而且我还是很陌生。

Answer 1

我认为您正在执行跨域请求，该请求已被浏览器阻止。

您可以直接使用Maps API，它具有方便的方法。

地图文档

function codeAddress() {
  var address = document.getElementById("address").value;
  geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      map.setCenter(results[0].geometry.location);
      var marker = new google.maps.Marker({
        map: map,
        position: results[0].geometry.location
      });
    } else {
      alert("Geocode was not successful for the following reason: " + status);
    }
  });
} 

Answer 2

我刚刚通过JSFiddle运行这段代码并得到了同样的错误问题。

但是，当我直接转到请求URL时，我得到了这个JSON块：

{
  "status": "REQUEST_DENIED",
  "results": [ ]
}

你有同感吗？

Answer 3

• 第一个问题是你不能在没有额外工作的情况下制作跨域Ajax请求 - 你必须使用JSONP而不仅仅是'普通'JSON，或者服务器必须通过适当的访问控制头^[ref]来允许CDR。

• 但是，更大的问题是，使用API​​的v3，Google已经取消了发出JSONP请求的能力（或者至少目前没有记录）。 他们希望您使用Google地图库地理编码器 ：

   var geocoder = new google.maps.Geocoder(); geocoder.geocode({ 'address': '1600+Amphitheatre+Parkway,+Mountain+View' }, function(data, status){ console.log(data); //data is an array of results }); 

---

目前，如果绝对必须使用Ajax地理编码但又不想使用Google Maps JS库中内置的地理编码器，则可以回退到v2 API ：

$.ajax({
    cache: false,

    url: 'http://maps.google.com/maps/geo?q=1600+Amphitheatre+Parkway,+Mountain+View,+CA&output=json&sensor=false&key=<your_key_here>',

    success: function(data, textStatus, jqXHR) {
        console.log('success');
        console.log(data); //geocoded data
    },

    error: function(jqXHR, textStatus, errorThrown) {
        console.log(textStatus);
        console.log(errorThrown);
        console.log(jqXHR);
    },

    jsonp: 'callback',

    dataType: 'json'
});