我发现了许多自动填充地址代码，但是我想添加一个Post函数，以便将找到的数据发布到PHP页面。
有人可以通过JavaScript或HTML代码来帮助实现这一目标吗？
HTML代码
<!DOCTYPE html>
<html>
<head>
<title>Auto-Complete Address Form</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<style>
.container {
margin-top: 20px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" type="text/javascript" ></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/javascript" ></script>
<script src="auto-complete.js" type="text/javascript" ></script>
</head>
<body>
<div class="container">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Address</h3>
</div>
<div class="panel-body">
<input id="autocomplete" placeholder="Enter your address" onFocus="geolocate()" type="text" class="form-control">
<br>
<div id="address">
<div class="row">
<div class="col-md-6">
<label class="control-label">Street address</label>
<input class="form-control" id="street_number" disabled="true">
</div>
<div class="col-md-6">
<label class="control-label">Route</label>
<input class="form-control" id="route" disabled="true">
</div>
</div>
<div class="row">
<div class="col-md-6">
<label class="control-label">City</label>
<input class="form-control field" id="locality" disabled="true">
</div>
<div class="col-md-6">
<label class="control-label">State</label>
<input class="form-control" id="administrative_area_level_1" disabled="true">
</div>
</div>
<div class="row">
<div class="col-md-6">
<label class="control-label">Zip code</label>
<input class="form-control" id="postal_code" disabled="true">
</div>
<div class="col-md-6">
<label class="control-label">Country</label>
<input class="form-control" id="country" disabled="true">
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Note Add Your API Key Below -->
<!-- The Form Will Not Work Without a Registered API Key -->
<!-- https://developers.google.com/maps/documentation/javascript/get-api-key -->
<script src="https://maps.googleapis.com/maps/api/js?key=GOOGLE_API_KEY&libraries=places&callback=initAutocomplete" async defer></script>
</body>
</html>
以下是用于从Google API获取自动地址位置的Javascript。
JavaScript
var placeSearch, autocomplete;
var componentForm = {
street_number: 'short_name',
route: 'long_name',
locality: 'long_name',
administrative_area_level_1: 'short_name',
country: 'long_name',
postal_code: 'short_name'
};
function initAutocomplete() {
// Create the autocomplete object, restricting the search to geographical
// location types.
autocomplete = new google.maps.places.Autocomplete(
/** @type {!HTMLInputElement} */(document.getElementById('autocomplete')),
{types: ['geocode']});
// When the user selects an address from the dropdown, populate the address
// fields in the form.
autocomplete.addListener('place_changed', fillInAddress);
}
function fillInAddress() {
// Get the place details from the autocomplete object.
var place = autocomplete.getPlace();
for (var component in componentForm) {
document.getElementById(component).value = '';
document.getElementById(component).disabled = false;
}
// Get each component of the address from the place details
// and fill the corresponding field on the form.
for (var i = 0; i < place.address_components.length; i++) {
var addressType = place.address_components[i].types[0];
if (componentForm[addressType]) {
var val = place.address_components[i][componentForm[addressType]];
document.getElementById(addressType).value = val;
}
}
}
// Bias the autocomplete object to the user's geographical location,
// as supplied by the browser's 'navigator.geolocation' object.
function geolocate() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var geolocation = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
var circle = new google.maps.Circle({
center: geolocation,
radius: position.coords.accuracy
});
autocomplete.setBounds(circle.getBounds());
});
}
}
我所需要做的就是找出如何在其中添加一个Form Post并将其发送到PHP页面以进行标准的$ _POST ['field']数据收集？
答案 0 :(得分：1)
您可以使用ajax将数据发送到表单中。
html：
<!DOCTYPE html>
<html>
<head>
<title>Auto-Complete Address Form</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<style>
.container {
margin-top: 20px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" type="text/javascript" ></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/javascript" ></script>
<script src="auto-complete.js" type="text/javascript" ></script>
</head>
<body>
<div class="container">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Address</h3>
</div>
<form method="post">
<div class="panel-body">
<input id="autocomplete" placeholder="Enter your address" onFocus="geolocate()" type="text" class="form-control">
<br>
<div id="address">
<div class="row">
<div class="col-md-6">
<label class="control-label">Street address</label>
<input class="form-control" id="street_number" disabled="true">
</div>
<div class="col-md-6">
<label class="control-label">Route</label>
<input class="form-control" id="route" disabled="true">
</div>
</div>
<div class="row">
<div class="col-md-6">
<label class="control-label">City</label>
<input class="form-control field" id="locality" disabled="true">
</div>
<div class="col-md-6">
<label class="control-label">State</label>
<input class="form-control" id="administrative_area_level_1" disabled="true">
</div>
</div>
<div class="row">
<div class="col-md-6">
<label class="control-label">Zip code</label>
<input class="form-control" id="postal_code" disabled="true">
</div>
<div class="col-md-6">
<label class="control-label">Country</label>
<input class="form-control" id="country" disabled="true">
</div>
<button onclick="SendData()">Send</button>
</div>
</div>
</div>
</form>
</div>
</div>
<!-- Note Add Your API Key Below -->
<!-- The Form Will Not Work Without a Registered API Key -->
<!-- https://developers.google.com/maps/documentation/javascript/get-api-key -->
<script src="https://maps.googleapis.com/maps/api/js?key=GOOGLE_API_KEY&libraries=places&callback=initAutocomplete" async defer></script>
</body>
</html>
Java脚本：
var placeSearch, autocomplete;
var componentForm = {
street_number: 'short_name',
route: 'long_name',
locality: 'long_name',
administrative_area_level_1: 'short_name',
country: 'long_name',
postal_code: 'short_name'
};
function SendData() {
$.ajax({
url: "yourfile.php",
type: "post",
data: componentForm,
success: function(){ // trigger when request was successfull
window.location.href = 'somewhere'
},
error: anyFunction // when error happened
complete: otherFunction // when request is completed -no matter if the error or not
// callbacks are of course not mandatory
})
};
function initAutocomplete() {
// Create the autocomplete object, restricting the search to geographical
// location types.
autocomplete = new google.maps.places.Autocomplete(
/** @type {!HTMLInputElement} */(document.getElementById('autocomplete')),
{types: ['geocode']});
// When the user selects an address from the dropdown, populate the address
// fields in the form.
autocomplete.addListener('place_changed', fillInAddress);
}
function fillInAddress() {
// Get the place details from the autocomplete object.
var place = autocomplete.getPlace();
for (var component in componentForm) {
document.getElementById(component).value = '';
document.getElementById(component).disabled = false;
}
// Get each component of the address from the place details
// and fill the corresponding field on the form.
for (var i = 0; i < place.address_components.length; i++) {
var addressType = place.address_components[i].types[0];
if (componentForm[addressType]) {
var val = place.address_components[i][componentForm[addressType]];
document.getElementById(addressType).value = val;
}
}
}
// Bias the autocomplete object to the user's geographical location,
// as supplied by the browser's 'navigator.geolocation' object.
function geolocate() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var geolocation = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
var circle = new google.maps.Circle({
center: geolocation,
radius: position.coords.accuracy
});
autocomplete.setBounds(circle.getBounds());
});
}
}