使用 AJAX 将 JavaScript 变量值移动到 PHP 变量 - using ajax to move javascript variable value to php variable?

我对编码很陌生，正在创建一个在线系统。在系统的一部分，我包含了谷歌距离矩阵API，它是JavaScript，而我的大多数其他代码是HTML或PHP。不幸的是，我需要距离（在JavaScript中计算）在我的PHP代码中，这样我就可以使用它。我读到我可以使用 AJAX？我不太确定我在做什么，但我试了一下。

在包含谷歌地图的页面之前，有一个表单。这意味着我必须使用SESSION变量将数据从Google页面之前的页面移动到Google页面之后的两个页面。这也是我的谷歌脚本得到它的两个位置来查找两者之间的距离的地方。我认为这一切都很好。

谷歌页面上的PHP：

$date = $_POST['date'];
$time = $_POST['time'];
$length = $_POST['length'];
$numberofpeople = $_POST['numberofpeople'];
$useofbus = $_POST['useofbus'];
session_start();
$_SESSION['time'] = $time;
$_SESSION['date'] = $date;
$_SESSION['length'] = $length;
$_SESSION['numberofpeople'] = $numberofpeople;
$_SESSION['pickuplocation'] = $pickuplocation;
$_SESSION['destination'] = $destination;
$_SESSION['useofbus'] = $useofbus;

$pickuplocation = $_POST['pickuplocation'];
$destination = $_POST['destination'];

谷歌页面上的 HTML：

</head>
<body onload="initialize()">
<div id="inputs">
  <pre class="prettyprint">
   </pre>
<form name="google" action="thirdform.php">
<table summary="google">

  <tr>
<td>&nbsp;</td>
<td><input name="Continue" value="Continue" type="submit" ></td>
<td>&nbsp;</td>
</tr> 
</table>
</form> 
</div>
<div id="outputDiv"></div>
<div id="map"></div>
</body>
</html>

除了AJAX之外，我不会发布Google Matrix的JavaScript：

var distance = results[j].distance.text;
$.get("thirdform.php", {miles:distance} );

我

不确定上面的代码是否正确，我猜我在某个地方出错了，可能在这里。在下一页，（第三形式.php）PHP：

session_start();
$time = $_SESSION['time'];
$date = $_SESSION['date'];
$length = $_SESSION['length'];
$numberofpeople = $_SESSION['numberofpeople'];
$pickuplocation = $_SESSION['pickuplocation'];
$destination = $_SESSION['destination'];
$useofbus = $_SESSION['useofbus'];
var_dump($_SESSION);
echo "</br>";
$distance = $_GET['miles'];
echo "DISTANCE: " . $distance . "</br>";

我无法在 PHP 变量中获取任何内容 $distance - 它是空的。我编码不正确吗？我从这个网站的某个地方在线遵循了一个声称有效的示例。我已经阅读了几篇文章并在Google和这个网站上进行了搜索，但是似乎在任何地方都没有一个不太复杂的明确答案，并且与我正在尝试做的事情有关。我已经阅读了很多示例，但它们都太复杂了，我无法使用和更改以放入我的代码中。我读到了一些代码，页面直接发送到下一页，但是我需要在我的页面上显示Google地图，因此需要使用按钮移动到下一页。

谁能给我一个正确的方向？谢谢。

.JS：

<script>
  var map;
  var geocoder;
  var bounds = new google.maps.LatLngBounds();
  var markersArray = [];
  var origin = '<?php echo $pickuplocation; ?>';
  var destination = '<?php echo $destination; ?>';

  var destinationIcon = 'https://chart.googleapis.com/chart? chst=d_map_pin_letter&chld=D|FF0000|000000';
  var originIcon = 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=O|FFFF00|000000';
  function initialize() {
    var opts = {
      center: new google.maps.LatLng(55.53, 9.4),
      zoom: 12,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById('map'), opts);
    geocoder = new google.maps.Geocoder();
    calculateDistances()
  }
  function calculateDistances() {
    var service = new google.maps.DistanceMatrixService();
    service.getDistanceMatrix(
      {
        origins: [origin],
        destinations: [destination],
        travelMode: google.maps.TravelMode.DRIVING,
        unitSystem: google.maps.UnitSystem.IMPERIAL,
        avoidHighways: false,
        avoidTolls: false
      }, callback);
  }
  function callback(response, status) {
    if (status != google.maps.DistanceMatrixStatus.OK) {
      alert('Error was: ' + status);
    } else {
      var origins = response.originAddresses;
      var destinations = response.destinationAddresses;
      var outputDiv = document.getElementById('outputDiv');
      outputDiv.innerHTML = '';
      deleteOverlays();
      for (var i = 0; i < origins.length; i++) {
        var results = response.rows[i].elements;
        addMarker(origins[i], false);
        for (var j = 0; j < results.length; j++) {
          addMarker(destinations[j], true);
          outputDiv.innerHTML += origins[i] + ' to ' + destinations[j]
              + ': ' + results[j].distance.text + ' in '
              + results[j].duration.text + '<br>';
        }
      } 
    }
  }
  function addMarker(location, isDestination) {
    var icon;
    if (isDestination) {
      icon = destinationIcon;
    } else {
      icon = originIcon;
    }
    geocoder.geocode({'address': location}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        bounds.extend(results[0].geometry.location);
        map.fitBounds(bounds);
        var marker = new google.maps.Marker({
          map: map,
          position: results[0].geometry.location,
          icon: icon
        });
        markersArray.push(marker);
      } else {
        alert('Geocode was not successful for the following reason: '
          + status);
      }
    });
  }
  function deleteOverlays() {
    if (markersArray) {
      for (i in markersArray) {
        markersArray[i].setMap(null);
      }
      markersArray.length = 0;
    }
  }

  </script>
  <script type="text/javascript">
  var distance = results[j].distance.text;
  $('.button-class').click(function() { $.get("thirdform.php", {miles:distance},   function (data){alert(data)} ); });



</script>

由于您要用$.get覆盖表单操作，请尝试删除表单并使用<button>而不是<input>按钮。

然后让您的 ajax 请求在该<button>上运行。

编辑：还值得注意的是，您可能应该只从 php 文件发送数据。然后，您可以在html/js中进行任何其他操作（"DISTANCE："， "<br /> "）。