Question

我正在尝试更新用户个人资料。用户插入地址并提交后，将其转换为纬度和经度。我创建了一个条件语句：如果GeocoderStatus正常，则更改geoLocationOK = 1，否则为0.当它为1时，运行更新函数，但纬度和经度不会传递给formData。在第二次更新时单击它添加。任何建议如何在formData中包含纬度和经度？

点击更新

        $(document).on("click", "#updateProfile", function (e) {
            function geocodeAddress(geocoder, resultsMap) {
                var address = document.getElementById('address').value;
                geocoder.geocode({'address': address}, function(results, status) {
                    if (status === google.maps.GeocoderStatus.OK) {
                        var latitude = results[0].geometry.location.lat();
                        var longitude = results[0].geometry.location.lng();
                        console.log(latitude);
                        console.log(longitude);
                        userLatitude = document.getElementById('cityLat').value = latitude;
                        userLongitude = document.getElementById('cityLng').value = longitude;
                        geoLocationOK = 1;
                        console.log(geoLocationOK);

                    } else {
                        alert('Geocode was not successful for the following reason: ' + status);
                    }
                });
            }
            geocodeAddress(geocoder);

            if(geoLocationOK == 1){
                updateProfile();
            }else{
                console.log("not ok");
                e.preventDefault();
            }
        });

这是更新功能

            function updateProfile(){
                console.log(geoLocationOK);

                $('#rootwizard').formValidation({
                    framework: 'bootstrap',
                    excluded: [':disabled'],
                    icon: {
                        valid: 'glyphicon glyphicon-ok',
                        invalid: 'glyphicon glyphicon-remove',
                        validating: 'glyphicon glyphicon-refresh'
                    },   
                    live: 'enabled',

                    framework: 'bootstrap',
                    icon: {
                        valid: 'glyphicon glyphicon-ok',
                        invalid: 'glyphicon glyphicon-remove',
                        validating: 'glyphicon glyphicon-refresh'
                    },
                    fields: {
                        userPhoneNr: {
                            validators: {
                                notEmpty: {
                                    message: 'Please insert phone nr'
                                },
                                regexp: {
                                    regexp: /^[a-zA-Z0-9_]+$/,
                                    message: 'Error'
                                }
                            }
                        },
                    }
                }).on('success.form.fv', function(e, data) {
                    // Prevent form submission
                    e.preventDefault();

                    var $form    = $(e.target),
                        formData = new FormData(),
                        params   = $form.serializeArray(),
                        files    = $form.find('[name="userProfilePhoto"]')[0].files;



                    $.each(params, function(i, val) {
                        formData.append(val.name, val.value);
                    });

                    $.ajax({
                        url: $form.attr('action'),
                        data: formData,
                        cache: false,
                        contentType: false,
                        processData: false,
                        type: 'POST',
                        success: function(data){
                            console.log(data);
                            if(data.status == 'success'){

                                getProfileData();     
                            }    
                        },
                        error: function(jqXHR, textStatus, errorThrown, data){
                            console.log(jqXHR, textStatus, errorThrown, data);
                        }
                    });
                    // Now Destroy
                    function destroyFormValidation() {
                        var instance = $('#rootwizard').data('formValidation');
                        if (instance) {
                            instance.destroy();
                        }
                    }
                    destroyFormValidation();
                });
            }

Answer 1

摆脱

        if(geoLocationOK == 1){
            updateProfile();
        }else{
            console.log("not ok");
            e.preventDefault();
        }

并将通话移至

updateProfile();

在你的

里面

if (status === google.maps.GeocoderStatus.OK) { ... }

块。

您可能在某处也需要e.preventDefault();（或者您可以将updateProfile元素更改为不是提交按钮）。

看起来地理定位函数是异步的，这意味着它与其他代码并行执行。因此，if (geolocationOK == 1)几乎肯定会在设置geolocationOK变量的函数之前运行。

在任何情况下使用异步调用，如果您的代码取决于异步调用的结果，那么该调用必须在异步调用的“success”上下文中执行。

Answer 2

为什么您只能在第二次点击时更新，因为在第一次点击时您实际绑定了表单验证。为什么不在函数 updateProfile 之外单独绑定表单验证。

然后在 updateProfile 内提交表单：

function updateProfile(){
     $('#rootwizard').submit();
}

jquery条件表单提交

点击更新

2 个答案: