javascript - 使用 Google Maps API 根据邮政编码和门牌号将地址填充到 php 表单中

Question

我有一个 PHP 表单，用户可以填写他们的门牌号码和邮政编码，然后单击按钮将他们的地址自动填充到空白字段中。我正在使用 Google Maps API，但出现错误。表单字段包含 [object Object] 而不是字符串值。

    function getAddress(object) {
      postcode = jQuery(object).parent().siblings('.address-finder-postcode').children('input').val();
      housenumber = jQuery(object).parent().siblings('.address-finder-house').children('input').val();

      street = jQuery(object).parent().siblings('.address-finder-street').children('input');
      district = jQuery(object).parent().siblings('.address-finder-district').children('input');
      town = jQuery(object).parent().siblings('.address-finder-town').children('input');
      county = jQuery(object).parent().siblings('.address-finder-county').children('input');

      if (postcode == '' || housenumber == '') {
        alert('Please enter a postcode and house name or number');
        return;
      }

      jQuery.ajax({
        type: "POST",
        url: '/wp-content/themes/wfal/page-templates/find-address.php',
        data: {
          'postcode': postcode
        },
        success: function(data) {
          jQuery('input[name=address1]').val(housenumber);
          jQuery('input[name=address2]').val(street);
          jQuery('input[name=city]').val(town);
          jQuery('input[name=county]').val(county);

          console.log(data);
          street.val(data.route);
          if (data.locality != data.postal_town) {
            district.val(data.locality);
          }
          town.val(data.postal_town);
          county.val(data.administrative_area_level_2);
        },
        dataType: 'json'
      });
    }

    jQuery(document).ready(function() {
      jQuery('.address-finder-button').click(function() {
        getAddress(this);
      });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
      <div class="half-width">
        <p class="address-finder-house"><label for="address-finder-house">House name or number:</label><input type="text" name="address1" id="address-finder-house" value="" /></p>
      </div>

      <div class="half-width">
        <p class="address-finder-postcode"><span class="title">Postcode:</span><input type="text" id="address-finder-postcode" value="" /></p>
        <p><input type="button" value="Find Address" class="address-finder-button" value="" /></p>
      </div>

      <div class="half-width">
        <span class="title">Street</span>
        <p class="address-finder-street"><input type="text" id="address-finder-street" name="address2" value="" /></p>
      </div>
    </div>

    <div class="row">
      <div class="half-width">
        <span class="title">Town/city</span>
        <p class="address-finder-town"><input id="address-finder-town" name="city" type="text" value="" /></p>
      </div>
      <div class="half-width">
        <span class="title">County</span>
        <p class="address-finder-county"><input id="rem-mort" name="county" type="text" value="" /> </p>
      </div>
    </div>

<?php
  // Get the postcode from the request
  $postcode = $_REQUEST['postcode'];

  // Get the latitude & longitude of submitted postcode
  $postcode = urlencode($postcode);
  $query = 'https://maps.googleapis.com/maps/api/geocode/json?address=' . 
  $postcode . '&sensor=false';

  $result = json_decode(file_get_contents($query));
  $lat = $result->results[0]->geometry->location->lat;
  $lng = $result->results[0]->geometry->location->lng;

  // Get the address based on returned lat & long
  $address_url = 'https://maps.googleapis.com/maps/api/geocode/json?latlng=' . $lat . ',' . $lng . '&sensor=false';
  $address_json = json_decode(file_get_contents($address_url));
  $address_data = $address_json->results[0]->address_components;

  foreach($address_data as $data):
    $array[$data->types[0]] = $data->long_name;
  endforeach;

  echo json_encode($array);
?>

这是我网站上结果的屏幕截图 -

这是我的控制台日志的屏幕截图 - prnt.sc/ii7xza。正如您所看到的，数据没有被插入到地址字段中。他们保持空白。

我在这里做错了什么？

谢谢

Answer 1

在成功回调中设置值时，您引用的是对象本身，而不是数据。

jQuery('input[name=address1]').val(housenumber);

在该实例中，housenumber 是一个对象，最好的办法是在它上进行控制台登录并找出确切的参数是什么。你最终应该得到的是

jQuery('input[name=address1]').val(housenumber.value);

或类似的东西。

如果您发布更多输出，我们可以确定确切的条目。

<小时/>

给定样本数据；

jQuery('input[name=address1]').val(housenumber); 应变为 jQuery('input[name=address1]').val(data.street_number) ;

从屏幕截图来看，您只需使用 ajax 调用返回的键即可。您必须在键前添加 data. 前缀，因为这就是您将请求返回的数据传递到回调函数中的方式。

关于$.ajax()的文档 http://api.jquery.com/jQuery.ajax/ 以及有关 Ajax 事件的文档，http://api.jquery.com/Ajax_Events/成功回调是一个事件。