谷歌地圖地理編碼AJAX使用變量作爲URL

Question

$('form').submit(function(event){ 
    event.preventDefault(); 
    var userData = "https://maps.googleapis.com/maps/api/geocode/json?address="+$('input#city').val()+"&key=MY_API_KEY"; 
    console.log(userData); 
    $.ajax({ 
     type: "GET", 
     url : userData, 
     success: function(data){ 
      $.each(data['results'][0]['address_components'], function(key, value) { 
       if(value["types"][0] == "postal_code"){ 
        $('.alert-success').fadeIn(2000).html('Post/ZIP Code: '+value["long_name"]); 
       } 
      }); 
     } 
    }) 
    }); 

所以，我有這個代碼，上面，目前返回沒有錯誤，也沒有任何結果所需。

它，只要我把整個「https://maps.googleapis.com/maps/api/geocode/json?address=‘’&鍵=‘’」字符串中的AJAX的url: "",部分工作正常，但試圖通過我的變量時，它不希望做任何事情。

從我發現變量應該很容易地通過ajax調用，所以我有點迷路。

Answer 1

你需要URL編碼返回的字符串$('input#city').val()

相關的問題：JavaScript URL encode

注：並非所有的地理編碼器返回的記錄響應數組成員與postal_code類型（例如像查詢爲「紐約，紐約」，它有多個郵政編碼）。

var userData = "https://maps.googleapis.com/maps/api/geocode/json?address=" 
       + encodeURIComponent($('input#city').val()) 
       + "&key=MY_API_KEY"; 
console.log(userData); 
$.ajax({ 
    type: "GET", 
    url: userData, 
    success: function(data) { 
    console.log(data); 
    $.each(data['results'][0]['address_components'], function(key, value) { 
     if (value["types"][0] == "postal_code") { 
     $('.alert-success').fadeIn(2000).html('Post/ZIP Code: ' + value["long_name"]); 
     } 
    }); 
    } 
}); 

Answer 2

您的情況if (value["types"][0] == "postal_code") {不起作用。

通過console.log檢查返回的數據對象。

這裏是沒有它的工作小提琴：

https://jsfiddle.net/1t82y0xa/