将变量从html传递到javascript再传递到php

Passing variables from html to javascript to php

本文关键字：php javascript 变量 html      更新时间：2023-09-26

我正在尝试对用户提交的地址进行地理编码，并将其存储到数据库中。表单调用一个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);
?>

您正在调用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>

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

另外，您正在调用的API给出了一个复杂的返回类型，您应该检查它……要获得lat和lng，您必须从数组中选择一个元素，并检查geometry.location中的内容。。。（您可以查看：https://developers.google.com/maps/documentation/javascript/reference#GeocoderResult)

因此，首先，在发布表单之前，执行ajax调用以获取coords

只需添加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);
?>

有一次，a使用这个代码段从一个地址获取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;

javascript正在查找值

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

在html输入中没有值：

<input id="address" name="address" placeholder="Adrese" type="text">
相关文章：