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

Question

When the form is submitted the function buttonClicked() is run. This function runs callGeoCode() which gets the latitude and longitude information for whatever the user typed in the form. Whenever I click the button to submit the form the page reloads. However when I comment out the console.log(location.lat+','+location.lng); line the page doesn't reload. Why would this be? I can't seem to figure it out.

$('#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

Try this:-

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

For geocode api you can try something like

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'); 
}