Javascript 随机故障-使用Google Location API丰富城市和州的网络表单

我没有太多的编程经验，我正在寻找帮助，找出为什么城市和州的webform字段在表单提交时没有被google location api脚本填充。我们有大约30%的失败率，而且似乎没有达到任何api调用限制，这不是因为邮政编码无效。我想不出是什么问题

背景： 我们的网站上有带有以下可见字段的表单：

• 名字
• 电子邮件
• 邮政编码
• 国家（挑选名单）

以及这些隐藏字段（由页面上脚本的调用填充）：

• 城市
• 陈述

我们正在寻找的基本流程是：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

<script type='text/javascript' >

$(document).ready(function() {
    // Get city/state only if country has been selected and postal code is at least
    // 5 characters long
    $('#PostalCode,#Country').change(function() {
      var postalCode = $('#PostalCode').val();
      var countryCode = $('#Country option:selected').val();
      if (postalCode.length >= 5 && countryCode !== '') {
        getResponse(postalCode);
      }
    });
})

function getResponse(postalCode) {
  var apiKey = 'OurAPIkeyIshere';
  var baseUrl = `https://maps.googleapis.com/maps/api/geocode/json?&key=`;
  var countryCode = $('#Country option:selected').val();
  var componentFilter = `&components=country:${ countryCode }|postal_code:${ postalCode }&`;
  var date = new Date();
  var dateTime = `&_=${ date.getTime() }`;
  var url = baseUrl + apiKey + componentFilter + dateTime;

  $.support.cors = true;
  $.ajaxSetup({ cache: false });
  $.getJSON(url, function(response) {
    var getStatus = response.status;
    if (getStatus === 'OK') {
      getCityState(response.results[0].address_components);
    }
  });
}

function getCityState(addressComponents) {
  var city, state, nbhd, subLoc = '';
  var hasCity, hasPostalTown, hasSubLoc = false;

  $.each(addressComponents, function(index, addressComponent) {
    var types = addressComponent.types;
    $.each(types, function(index, type) {
      switch(type) {
        case 'postal_town':
          postalTown = addressComponent.long_name;
          hasPostalTown = true;
          break;
        case 'locality':
          city = addressComponent.long_name;
          hasCity = true;
          break;
        case 'sublocality':
          subLoc = addressComponent.long_name;
          hasSubLoc = true;
          break;
        case 'neighborhood':
          nbhd = addressComponent.long_name;
          break;
        case 'administrative_area_level_1':
          state = addressComponent.short_name;
          break;
      }
    });
  });

  // set the city
  if(hasPostalTown) {
    $('#City').val(postalTown);
  } else if(hasCity) {
    $('#City').val(city);
  } else if(hasSubLoc) {
    $('#City').val(subLoc);
  } else {
    $('#City').val(nbhd);
  }

  // set the state
  $('#State').val(state);

  // reset flags
  hasCity = false;
  hasPostalCode = false;
  hasSubLoc = false;
}
</script>

当用户在表单中输入邮政编码长度大于或等于5且国家/地区不为空时，则调用google的location api，并使用City和State填充表单隐藏字段

以下是我们正在使用的脚本：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

<script type='text/javascript' >

$(document).ready(function() {
    // Get city/state only if country has been selected and postal code is at least
    // 5 characters long
    $('#PostalCode,#Country').change(function() {
      var postalCode = $('#PostalCode').val();
      var countryCode = $('#Country option:selected').val();
      if (postalCode.length >= 5 && countryCode !== '') {
        getResponse(postalCode);
      }
    });
})

function getResponse(postalCode) {
  var apiKey = 'OurAPIkeyIshere';
  var baseUrl = `https://maps.googleapis.com/maps/api/geocode/json?&key=`;
  var countryCode = $('#Country option:selected').val();
  var componentFilter = `&components=country:${ countryCode }|postal_code:${ postalCode }&`;
  var date = new Date();
  var dateTime = `&_=${ date.getTime() }`;
  var url = baseUrl + apiKey + componentFilter + dateTime;

  $.support.cors = true;
  $.ajaxSetup({ cache: false });
  $.getJSON(url, function(response) {
    var getStatus = response.status;
    if (getStatus === 'OK') {
      getCityState(response.results[0].address_components);
    }
  });
}

function getCityState(addressComponents) {
  var city, state, nbhd, subLoc = '';
  var hasCity, hasPostalTown, hasSubLoc = false;

  $.each(addressComponents, function(index, addressComponent) {
    var types = addressComponent.types;
    $.each(types, function(index, type) {
      switch(type) {
        case 'postal_town':
          postalTown = addressComponent.long_name;
          hasPostalTown = true;
          break;
        case 'locality':
          city = addressComponent.long_name;
          hasCity = true;
          break;
        case 'sublocality':
          subLoc = addressComponent.long_name;
          hasSubLoc = true;
          break;
        case 'neighborhood':
          nbhd = addressComponent.long_name;
          break;
        case 'administrative_area_level_1':
          state = addressComponent.short_name;
          break;
      }
    });
  });

  // set the city
  if(hasPostalTown) {
    $('#City').val(postalTown);
  } else if(hasCity) {
    $('#City').val(city);
  } else if(hasSubLoc) {
    $('#City').val(subLoc);
  } else {
    $('#City').val(nbhd);
  }

  // set the state
  $('#State').val(state);

  // reset flags
  hasCity = false;
  hasPostalCode = false;
  hasSubLoc = false;
}
</script>

放置在头部的脚本：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

<script type='text/javascript' >

$(document).ready(function() {
    // Get city/state only if country has been selected and postal code is at least
    // 5 characters long
    $('#PostalCode,#Country').change(function() {
      var postalCode = $('#PostalCode').val();
      var countryCode = $('#Country option:selected').val();
      if (postalCode.length >= 5 && countryCode !== '') {
        getResponse(postalCode);
      }
    });
})

function getResponse(postalCode) {
  var apiKey = 'OurAPIkeyIshere';
  var baseUrl = `https://maps.googleapis.com/maps/api/geocode/json?&key=`;
  var countryCode = $('#Country option:selected').val();
  var componentFilter = `&components=country:${ countryCode }|postal_code:${ postalCode }&`;
  var date = new Date();
  var dateTime = `&_=${ date.getTime() }`;
  var url = baseUrl + apiKey + componentFilter + dateTime;

  $.support.cors = true;
  $.ajaxSetup({ cache: false });
  $.getJSON(url, function(response) {
    var getStatus = response.status;
    if (getStatus === 'OK') {
      getCityState(response.results[0].address_components);
    }
  });
}

function getCityState(addressComponents) {
  var city, state, nbhd, subLoc = '';
  var hasCity, hasPostalTown, hasSubLoc = false;

  $.each(addressComponents, function(index, addressComponent) {
    var types = addressComponent.types;
    $.each(types, function(index, type) {
      switch(type) {
        case 'postal_town':
          postalTown = addressComponent.long_name;
          hasPostalTown = true;
          break;
        case 'locality':
          city = addressComponent.long_name;
          hasCity = true;
          break;
        case 'sublocality':
          subLoc = addressComponent.long_name;
          hasSubLoc = true;
          break;
        case 'neighborhood':
          nbhd = addressComponent.long_name;
          break;
        case 'administrative_area_level_1':
          state = addressComponent.short_name;
          break;
      }
    });
  });

  // set the city
  if(hasPostalTown) {
    $('#City').val(postalTown);
  } else if(hasCity) {
    $('#City').val(city);
  } else if(hasSubLoc) {
    $('#City').val(subLoc);
  } else {
    $('#City').val(nbhd);
  }

  // set the state
  $('#State').val(state);

  // reset flags
  hasCity = false;
  hasPostalCode = false;
  hasSubLoc = false;
}
</script>

将脚本放置在正文结束标记之前：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

<script type='text/javascript' >

$(document).ready(function() {
    // Get city/state only if country has been selected and postal code is at least
    // 5 characters long
    $('#PostalCode,#Country').change(function() {
      var postalCode = $('#PostalCode').val();
      var countryCode = $('#Country option:selected').val();
      if (postalCode.length >= 5 && countryCode !== '') {
        getResponse(postalCode);
      }
    });
})

function getResponse(postalCode) {
  var apiKey = 'OurAPIkeyIshere';
  var baseUrl = `https://maps.googleapis.com/maps/api/geocode/json?&key=`;
  var countryCode = $('#Country option:selected').val();
  var componentFilter = `&components=country:${ countryCode }|postal_code:${ postalCode }&`;
  var date = new Date();
  var dateTime = `&_=${ date.getTime() }`;
  var url = baseUrl + apiKey + componentFilter + dateTime;

  $.support.cors = true;
  $.ajaxSetup({ cache: false });
  $.getJSON(url, function(response) {
    var getStatus = response.status;
    if (getStatus === 'OK') {
      getCityState(response.results[0].address_components);
    }
  });
}

function getCityState(addressComponents) {
  var city, state, nbhd, subLoc = '';
  var hasCity, hasPostalTown, hasSubLoc = false;

  $.each(addressComponents, function(index, addressComponent) {
    var types = addressComponent.types;
    $.each(types, function(index, type) {
      switch(type) {
        case 'postal_town':
          postalTown = addressComponent.long_name;
          hasPostalTown = true;
          break;
        case 'locality':
          city = addressComponent.long_name;
          hasCity = true;
          break;
        case 'sublocality':
          subLoc = addressComponent.long_name;
          hasSubLoc = true;
          break;
        case 'neighborhood':
          nbhd = addressComponent.long_name;
          break;
        case 'administrative_area_level_1':
          state = addressComponent.short_name;
          break;
      }
    });
  });

  // set the city
  if(hasPostalTown) {
    $('#City').val(postalTown);
  } else if(hasCity) {
    $('#City').val(city);
  } else if(hasSubLoc) {
    $('#City').val(subLoc);
  } else {
    $('#City').val(nbhd);
  }

  // set the state
  $('#State').val(state);

  // reset flags
  hasCity = false;
  hasPostalCode = false;
  hasSubLoc = false;
}
</script>

$（文档）.ready（函数（）{
//仅当已选择国家/地区且邮政编码至少为
//5个字符长
$（“#PostalCode，#Country”）.change（function（）{
var postalCode=$（'#postalCode'）.val（）；
var countryCode=$（“#国家选项：选定”）.val（）；
如果（postalCode.length>=5&&countryCode！=''）{
getResponse（postalCode）；
}
});
})
函数getResponse（postalCode）{
var apiKey='OurAPIkeyIshere'；
var baseUrl=`https://maps.googleapis.com/maps/api/geocode/json?&key=`;
var countryCode=$（“#国家选项：选定”）.val（）；
var componentFilter=`&components=country:${countryCode}|邮政编码：${postalCode}&`；
变量日期=新日期（）；
var dateTime=`&${date.getTime（）}`；
var url=baseUrl+apiKey+componentFilter+dateTime；
$.support.cors=true；
$.ajaxSetup（{cache:false}）；
$.getJSON（url、函数（响应）{
var getStatus=response.status；
如果（getStatus=='OK'）{
getCityState（response.results[0]。地址\组件）；
}
});
}
函数getCityState（addressComponents）{
var市、州、nbhd、次级OC=“”；
var hasCity、hasPostalTown、hasSubLoc=假；
$.each（地址组件，函数（索引，地址组件）{
变量类型=addressComponent.types；
$.each（类型、函数（索引、类型）{
开关（类型）{
“邮政镇”案例：
postalTown=addressComponent.long\u名称；
haspastaltown=true；
打破
“地点”一案：
城市=addressComponent.long\u名称；
hasCity=true；
打破
“亚局部性”病例：
subLoc=addressComponent.long\u名称；
hasSubLoc=真；
打破
“邻居”案例：
nbhd=addressComponent.long\u名称；
打破
案例“行政区一级”：
状态=addressComponent.short\u名称；
打破
}
});
});
//设置城市
如果（hasPostalTown）{
$（#City'）.val（postalTown）；
}else if（哈斯城）{
$（'城市'）.val（城市）；
}否则如果（哈苏布洛克）{
$（#City'）.val（subLoc）；
}否则{
$（#City'）.val（nbhd）；
}
//设定状态
$（'#State'）.val（State）；
//重置标志
hasCity=假；
haspastalcode=false；
hasSubLoc=假；
}

是否检查API调用是否未超时。。。您是否在提交表单之前等待API响应？我们已经检查过了，但不幸的是，情况并非如此。在提交之前，我们不会等待API响应，我们正在与我们的一位开发人员一起编写基于承诺的脚本，看看这是否有帮助。您是否检查了API调用是否没有超时。。。您是否在提交表单之前等待API响应？我们已经检查过了，但不幸的是，情况并非如此。在提交之前，我们不会等待API响应，我们正在与我们的一位开发人员一起编写一个基于承诺的脚本，看看这是否有帮助。