对Google api http请求使用动态变量

Question

设置表单以接收用户输入，该用户输入将被收集到地址var中。 使用jQuery序列化每个URL要求的地址。 jQuery序列化使用getJSON将请求发送到google geocode api。 在for循环内使用for in循环遍历结果。 最后，访问JSON结果。

问题：为什么我的结果undefined ？

码：

$(function() {
    var address = document.getElementById('address').value;
    address += " "+document.getElementById('street_add').value;
    address += " "+document.getElementById('city').value;
    address += " "+document.getElementById('state').value;
    address += " "+document.getElementById('postcode').value;   

    $('#clickme').click(function() {
        var strAddress = $( "address" ).serialize();
        // data is an object containing info also called a map key/values
        $.getJSON("http://maps.googleapis.com/maps/api/geocode/json?address=strAddress&sensor=false", function( data ) {
            for (var i = 0; i <= data.length; i++) {
                for (key in data.results[i]) {
                    var mystring = data.results[0].formatted_address;
                    var mylat = data.results[0].geometry.location.lat;
                    var mylng = data.results[0].geometry.location.lng;
                } 
            }

            $("<ul/>", {
                "class": "zombies",
                html: document.write(mystring,'<hr />', mylat, '<hr />', mylng),
            }).appendTo( "body" ); 
        });
    });
});

Answer 1

首先，您需要将address值附加到url字符串。

其次，您要将document.write的返回值分配给新ul元素的html属性。 document.write不返回任何内容，因此您看到的是undefined 。

另外，您正在遍历data.results但是对于每次迭代，仅检索第一项，因此for是多余的。 试试这个吧。

$.getJSON("http://maps.googleapis.com/maps/api/geocode/json?address=" + strAddress + "&sensor=false", function( data ) {
    var mystring = data.results[0].formatted_address;
    var mylat = data.results[0].geometry.location.lat;
    var mylng = data.results[0].geometry.location.lng;

    $("<ul/>", {
        "class": "zombies",
        html: mystring + '<hr />' +  mylat + '<hr />' + mylng),
    }).appendTo("body"); 
});