Javascript 使用jQuery从Google地理编码API读取JSON数据

Javascript 使用jQuery从Google地理编码API读取JSON数据,javascript,jquery,json,google-maps,google-geocoding-api,Javascript,Jquery,Json,Google Maps,Google Geocoding Api,我正在努力学习谷歌地图地理编码,以及如何读取它发回的JSON数据。这是谷歌发回的信息: { "results" : [ { "address_components" : [ { "long_name" : "1600", "short_name" : "1600", "types" : [ "street_number" ]

我正在努力学习谷歌地图地理编码,以及如何读取它发回的JSON数据。这是谷歌发回的信息:

{
   "results" : [
      {
         "address_components" : [
            {
               "long_name" : "1600",
               "short_name" : "1600",
               "types" : [ "street_number" ]
            },
            {
               "long_name" : "Amphitheatre Pkwy",
               "short_name" : "Amphitheatre Pkwy",
               "types" : [ "route" ]
            },
            {
               "long_name" : "Mountain View",
               "short_name" : "Mountain View",
               "types" : [ "locality", "political" ]
            },
            {
               "long_name" : "Santa Clara County",
               "short_name" : "Santa Clara County",
               "types" : [ "administrative_area_level_2", "political" ]
            },
            {
               "long_name" : "California",
               "short_name" : "CA",
               "types" : [ "administrative_area_level_1", "political" ]
            },
            {
               "long_name" : "United States",
               "short_name" : "US",
               "types" : [ "country", "political" ]
            },
            {
               "long_name" : "94043",
               "short_name" : "94043",
               "types" : [ "postal_code" ]
            }
         ],
         "formatted_address" : "1600 Amphitheatre Parkway, Mountain View, CA 94043, USA",
         "geometry" : {
            "location" : {
               "lat" : 37.4224764,
               "lng" : -122.0842499
            },
            "location_type" : "ROOFTOP",
            "viewport" : {
               "northeast" : {
                  "lat" : 37.4238253802915,
                  "lng" : -122.0829009197085
               },
               "southwest" : {
                  "lat" : 37.4211274197085,
                  "lng" : -122.0855988802915
               }
            }
         },
         "place_id" : "ChIJ2eUgeAK6j4ARbn5u_wAGqWA",
         "types" : [ "street_address" ]
      }
   ],
   "status" : "OK"
}
我用下面的代码得到这个响应:

$("#submit").click(function(event) {
  var address = encodeURIComponent($("#location").val());

  $.ajax({
    type: "GET",
    url: "https://maps.googleapis.com/maps/api/geocode/json?address=" + address + "&sensor=false&key=" + API_KEY,
    dataType: "json",
    success: processJSON
  });

  function processJSON(json) {
    // Do stuff here
  }
});
问题是我不知道在
processJSON
中放什么。我正在这里阅读教程:以及上的
.getJSON()
文档。然而,我很难理解这两个网站

如果我想获得邮政编码,我该如何读取数据?我试过这个:

function processJSON(json) {
    // Do stuff here
    alert("Postal Code:" + json.address_components[6].long_name);
  }
成功后,我也用
getJSON()
进行了尝试:

$.getJSON(url, function(json) {
  alert("Postal Code:" + json.address_components[6].long_name);
 });

然而,他们都没有发出任何警报。我做错了什么?提前谢谢

在使用ajax后添加成功函数

$("#submit").click(function(event) {
  var address = encodeURIComponent($("#location").val());

  $.ajax({
    type: "GET",
    url: "https://maps.googleapis.com/maps/api/geocode/json?address=" + address + "&sensor=false&key=" + API_KEY,
    dataType: "json",
    success: processJSON
  }).success(function(data){
    processJSON(data);
  }

  function processJSON(json) {
    // Do stuff here
    console.log(json);
    alert("Postal Code:" + json.results[0].address_components[6].long_name);
  }
});

在使用ajax之后添加成功函数

$("#submit").click(function(event) {
  var address = encodeURIComponent($("#location").val());

  $.ajax({
    type: "GET",
    url: "https://maps.googleapis.com/maps/api/geocode/json?address=" + address + "&sensor=false&key=" + API_KEY,
    dataType: "json",
    success: processJSON
  }).success(function(data){
    processJSON(data);
  }

  function processJSON(json) {
    // Do stuff here
    console.log(json);
    alert("Postal Code:" + json.results[0].address_components[6].long_name);
  }
});

您需要解析success函数中的数据

function processJSON(data) {
    var json = JSON.parse(data);
   //..
}
还可以向$.ajax中添加一个错误函数

$.ajax({ 
    type..
    url...
    success..
    error: function() {
        console.log('error on request')
    }
    ...

您需要解析success函数中的数据

function processJSON(data) {
    var json = JSON.parse(data);
   //..
}
还可以向$.ajax中添加一个错误函数

$.ajax({ 
    type..
    url...
    success..
    error: function() {
        console.log('error on request')
    }
    ...

谢谢,这使它进入了功能;但是,它说
address\u components
未定义。json.results.address\u components[6]。long\u名称错误,但现在它位于
json.results
(未定义)。您可以在processJSON函数中控制台.log json来查看它到底是什么。实际上,您不应该依赖
json.results[0]。address\u components[6]
根本不是邮政编码。相反,您应该通过所有
json.results[]
进行迭代,并在其
json.results[i]中使用
postal_code
。键入
谢谢,这使它进入了函数;但是,它说
address\u components
未定义。json.results.address\u components[6]。long\u名称错误,但现在它位于
json.results
(未定义)。您可以在processJSON函数中控制台.log json来查看它到底是什么。实际上,您不应该依赖
json.results[0]。address\u components[6]
根本不是邮政编码。相反,您应该通过所有的
json.results[]
进行迭代,并使用在其
json.results[i]中包含
postal_code>.types
的一个。我得到这个错误:
json.parse:json数据第1行第2列的意外字符。
。感谢您让我知道这个错误函数!尝试使用chrome rest客户端插件查看查询结果。chrome商店里有一些。您可能没有收到json。我收到以下错误:
json.parse:json数据第1行第2列出现意外字符
。感谢您让我知道错误函数!尝试使用chrome rest客户端插件查看查询结果。chrome商店里有一些。您可能没有收到json。