Question

我正在使用geocomplete lib来获取输入字段中提供的地址的lat和lng。然后我需要将lat和lng传递给from来提交数据。但是每次我都会收到以下错误'未捕获的ReferenceError：lat未定义'

var option = {
    types: ['(cities)'],
    country: 'GB'
};
$("#location").geocomplete(option).bind("geocode:result", function(event,
    result) {
    console.log(result.geometry.location.lat());
    console.log(result.geometry.location.lng());
    var lat = result.geometry.location.lat()
    var lng = result.geometry.location.lng()
});
$(document).ready(function() {
    $('form.ajax').on('submit', function(e) {
        e.preventDefault();  
        var params = {
            lat: lat,
            lng: lng,
        }
        $.ajax({
            type: 'POST',
            data: params,
            url: 'save_to_json.php',
            success: function(data) {
                console.log('success');
                console.log(data);
            },
            error: function(data) {
                console.log('error');
                console.log(data);
            },
            complete: function() {
                console.log('complete');
            }
        });
        return false;
    });
});

Answer 1

您需要在更高的范围内定义lat和lng变量，以便geocode:result处理程序和表单submit处理程序都可以访问它们。试试这个：

vat lat, lng;

$("#location").geocomplete(option).bind("geocode:result", function(event, result) {
    // note the removal of 'var'
    lat = result.geometry.location.lat()
    lng = result.geometry.location.lng()
});

或者，如果您更愿意避免全局变量，可以将这些值设置为要在提交时读取的表单上的data属性：

$("#location").geocomplete(option).bind("geocode:result", function(event, result) {
    $('form.ajax').data({
        lat: result.geometry.location.lat()
        lng: result.geometry.location.lng()
    });
});

$(document).ready(function() {
    $('form.ajax').on('submit', function(e) {
        e.preventDefault();  
        var $form = $(this);
        var params = {
            lat: $form.data('lat'),
            lng: $form.data('lng'),
        };
        // the rest of your AJX code...
    });
});

在jQuery中传递变量

1 个答案: