Question

我非常擅长编码并正在创建一个在线系统。我的系统的一部分包括Google Distance Matrix API，它是JavaScript，而我的大多数其他代码都是HTML或PHP。不幸的是，我需要距离（用JavaScript计算）在我的PHP代码中，所以我可以玩它。我看过我可以使用AJAX吗？我对我正在做的事情并不十分肯定，但我还是去了。

在包含Google地图的网页之前，有一个表单。这意味着我必须使用SESSION变量将数据从Google页面之前的页面移动到Google页面之后的两个页面。这也是我的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'];

Google页面上的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矩阵的JavaScript：

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

我不确定上面的代码是否正确，我猜我在某个地方出错了，可能在这里。在下一页，（thirdform.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 Map，因此需要使用该按钮移动到下一页。

有人能给我一个正确方向吗？感谢。

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>

Answer 1

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

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

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

使用ajax将javascript变量值移动到php变量？

1 个答案: