Question

提交表单时，运行buttonClicked（）函数。此函数运行callGeoCode（），它获取用户在表单中键入的任何内容的纬度和经度信息。每当我点击按钮提交表单页面重新加载。但是，当我注释掉console.log(location.lat+','+location.lng);行时，页面不会重新加载。为什么会这样？我似乎无法弄明白。

$('#find-location').submit(function () {
     buttonClicked();
     return false;
});    
function buttonClicked() {
    userInput = document.getElementById("locationInput").value;
    var location = callGeoCode(userInput);
    console.log(location.lat+','+location.lng);
}
function callGeoCode(userInput) {
    $.getJSON('https://maps.googleapis.com/maps/api/geocode/json?address=' + userInput + '&key=APIKEY-GOES-HERE', 
        function(data) {
            if (data.status === 'OK') {
                var lat = data.results[0].geometry.location.lat;
                var lng = data.results[0].geometry.location.lng;
                return {lat: lat, lng: lng};
            } else {
                return 'FAILED';
            }
        }
    );
}

Answer 1

试试这个： -

$('#find-location').submit(function (event) {
     event.preventDefault();
     buttonClicked();
     return false;
});

对于geocode api，您可以尝试类似

的内容

function buttonClicked() {
    userInput = document.getElementById("locationInput").value;
    var locationPromise = callGeoCode(userInput);
    locationPromise.done(function( data ) {
        console.log(data);
        if (data.status === 'OK') {
            var lat = data.results[0].geometry.location.lat;
            var lng = data.results[0].geometry.location.lng;
            console.log("lat:" + lat + "long:" + long);
        }
    }
}

function callGeoCode(userInput) {
    return $.getJSON('https://maps.googleapis.com/maps/api/geocode/json?address=' + userInput + '&key=APIKEY-GOES-HERE'); 
}

从JavaScript函数访问返回值导致HTML页面重新加载

1 个答案: