在javascript中异步预处理表单数据答案

【问题标题】：Preprocess form data asynchronously in javascript在javascript中异步预处理表单数据
【发布时间】：2015-11-18 19:33:52
【问题描述】：

我的表单字段之一是地址。在将其发送到服务器之前，我想将其转换为纬度和经度。这需要向某些外部服务（例如 Google Maps API）发送异步请求。这样做的正确方法是什么？

我的地理编码 sn-p：

function geocodeAddress() {
  var address = document.getElementById("address").value;
  geocoder.geocode({"address": address}, function(results, status) {
    if (status === google.maps.GeocoderStatus.OK) {
      var lat = results[0].geometry.location.lat()
      document.getElementById("latitude").value = lat
    } else {
      alert("Geocode was not successful for the following reason: " + status);
    }
  });
}

我看到了几个选项：

使用 onsubmit 事件处理程序 - 首先返回 false（等待地理编码完成），然后在单独的回调集 latitude 字段中并提交表单。
对address 字段使用onchange 事件处理程序 - 这需要阻止提交按钮，直到我们对地址进行地理编码；如果我们在提交后预填充表单值也很棘手（例如过滤行）

显然我也可以在服务器端解析它，但这可能会导致一个用户在外部服务中使用我所有的“配额”，我必须实现某种公平，我想避免这种情况.

那么在javascript中解决这种表单值预处理的正确方法是什么？

【问题讨论】：

在提交时执行 - 使用地理编码响应中的回调，然后手动提交表单 (IMO)。

标签： javascript google-maps geocoding google-geocoding-api

【解决方案1】：

您可以考虑以下方法：

通过Event.preventDefault()阻止按钮的默认行为
通过google.maps.Geocoder.geocoder函数解析地址
一旦地址被解析简历表单提交：form.submit()

示例

function saveData(e) {
    e.preventDefault();   //1.stop default behaviour of button
    var address = document.getElementById("txtAddress").value;  
    resolveAddress(address,
        function(results) {
            document.getElementById("txtLat").value = results[0].geometry.location.lat();
            document.getElementById("txtLng").value = results[0].geometry.location.lng();
            document.getElementsByTagName('form')[0].submit(); //2.resume form submit
        },
        function(status) {
            console.log('An error occured while resolving an address');
        });
}

function resolveAddress(address,success,error) {
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({ "address": address }, function (results, status) {
        if (status === google.maps.GeocoderStatus.OK) {
            success(results);
        } else {
            error(status);
        }
    });
}

Plunker

【讨论】：