将变量从 html 传递到 javascript 到 php答案

【问题标题】：Passing variables from html to javascript to php将变量从 html 传递到 javascript 到 php
【发布时间】：2015-04-07 13:42:09
【问题描述】：

我正在尝试对用户提交的地址进行地理编码并将其存储到数据库中。该表单调用一个 php 文件，其中 javascript 检索地址并对其进行地理编码。然后将 lat 和 lng 值传递给 php 并存储在数据库中，但是数据库中唯一的值是零。

HTML 文件：

 <html>
  <body>
    <form action="registerEvent.php" id="form" method="post">       
        <input id="address" name="address" placeholder="Adrese" type="text">                    
        <button type="submit" id="submit">Send</button>             
    </form>
  </body>
</html>

registerEvent.php:

    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script>
var geocoder;
var inputLat;
var inputLng;

function codeAddress() {

    geocoder = new google.maps.Geocoder();

  var address = document.getElementById('address').value;
  geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {

    var inputLat = event.latLng.lat(); 
    var inputLng = event.latLng.lng();    

    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });

}

function passvariable() { 
  window.location.href = "registerEvent.php?lat=" + inputLat;
  window.location.href = "registerEvent.php?lng=" + inputLng; 
}

    codeAddress();
    passvariable();

</script>



<?php
    require("dbinfo.php");

    $connection=mysqli_connect ('localhost', $username, $password);
if (!$connection) {
  die('Not connected : ' . mysql_error());
}

$db_selected = mysqli_select_db($connection, $database);
if (!$db_selected) {
  die ('Can\'t use db : ' . mysql_error());
}

    $lat =$_GET['inputLat']; 
    $lng =$_GET['inputLng']; 

    $sql = "INSERT INTO sometable (lat, lng)
VALUES ('$lat', '$lng')";

    if (!mysqli_query($connection,$sql)) {
      die('Error: ' . mysqli_error($connection));
    };

    mysqli_close($connection);
?>

【问题讨论】：

标签： javascript php html database geocoding

【解决方案1】：

您调用window.location.href 两次，PHP 部分中的变量似乎不正确（$_GET['inputLat'] 代替了lat，$_GET['inputLong'] 代替了lon）

如果 HTML 文件是一个单独的文件，那么你需要以不同的方式获取地址：替换

var address = document.getElementById('address').value;

与

var address = "<?php echo $_POST['address']; ?>"

JS 函数应该看起来更像这样

<script src="https://maps.googleapis.com/maps/api/jsv=3.exp&signed_in=true">
</script>
<script> 
var geocoder;
var inputLat;
var inputLng; 

function codeAddress() {
  geocoder = new google.maps.Geocoder();
  var address = document.getElementById('address').value;
  geocoder.geocode( { 'address': address}, function(results, status) {
  if (status == google.maps.GeocoderStatus.OK) {
    var inputLat = event.latLng.lat(); 
    var inputLng = event.latLng.lng();    
    window.location.href = "registerEvent.php?lat=" + inputLat + "&lng=" + inputLng;
    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });

}
codeAddress();
</script>

还有 PHP 部分：

    // ...
    $lat =$_GET['lat']; 
    $lng =$_GET['lng']; 

    if (!empty($lat) && !empty($lng)) {    
       $sql = "INSERT INTO sometable (lat, lng) VALUES ('$lat', '$lng')";
       if (!mysqli_query($connection,$sql)) {
         die('Error: ' . mysqli_error($connection));
       };
    }

    mysqli_close($connection);

如果所有内容都在同一个文件中，则表单按钮应更改为以下内容：

<button type="button" id="submit" onclick="codeAddress()">Send</button>

【讨论】：

我认为 HTML 文件是一个单独的文件，而 registerEvent.php 显示重定向到自身的 javascript，然后保存

【解决方案2】：

在您的代码中，表单对 PHP 页面执行 POST，但您仅发布地址字段而没有从 google api 获得任何坐标。

加上您调用的 API 提供了一个复杂的返回类型，您应该检查它...要获取 lat 和 lng，您必须从数组中选择一个元素并检查 geometry.location 中的内容...（您可以检查： https://developers.google.com/maps/documentation/javascript/reference#GeocoderResult)

因此，首先，在发布表单之前进行 ajax 调用以获取坐标。

只需添加onsubmit="return codeAddress();"，然后在您的codeAddress 函数中添加return false; 以防止默认操作（防止提交表单本身）并使用类似这样的函数通过GET 将数据发送到registerEvent.php。

在您的 HTML 中：

<html>
  <head>
     <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
     <script type="text/javascript">
        function codeAddress() {
           var geocoder = new google.maps.Geocoder();
           var address = document.getElementById('address').value;
           geocoder.geocode( { 'address': address}, function(results, status) {
             if (status == google.maps.GeocoderStatus.OK) {
               var inputLat = results[0].geometry.location.lat(); 
               var inputLng = results[0].geometry.location.lng();    
               window.location.href = "registerEvent.php?inputLat=" + inputLat + "&inputLng=" + inputLng;
             } else {
               alert('Geocode was not successful for the following reason: ' + status);
             }
           });
           return false;
        }
     </script>
  </head>
  <body>
    <form action="registerEvent.php" id="form" method="post" onsubmit="return codeAddress()">       
       <input id="address" name="address" placeholder="Adrese" type="text">                    
       <button type="submit" id="submit">Send</button>             
    </form>
  </body>
</html>

在你的 PHP 中：

<?php
require("dbinfo.php");
$connection=mysqli_connect ('localhost', $username, $password);
if (!$connection) {
    die('Not connected : ' . mysql_error());
}
$db_selected = mysqli_select_db($connection, $database);
if (!$db_selected) {
    die ('Can\'t use db : ' . mysql_error());
}
$lat =$_GET['inputLat']; 
$lng =$_GET['inputLng']; 
$sql = "INSERT INTO sometable (lat, lng) VALUES ('$lat', '$lng')";
if (!mysqli_query($connection,$sql)) {
    die('Error: ' . mysqli_error($connection));
};
mysqli_close($connection);
?>

【讨论】：

【解决方案3】：

曾经，a 使用这个 sn-p 从一个地址获取 lat/lng，全部在 PHP（旧 API）中：

$address = "......";
$json = file_get_contents("http://maps.googleapis.com/maps/api/geocode/json?sensor=false&address=".urlencode($address));
$json = json_decode($json);

if ($json->status == "OK")
    return $json->results[0]->geometry->location;

【讨论】：

【解决方案4】：

javascript 正在寻找一个值

var address = document.getElementById('address').value;

在html输入中并没有值：

<input id="address" name="address" placeholder="Adrese" type="text">

【讨论】：