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/成功回调是一个事件。

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

1 个答案: