如何将javascript数据传递到另一个页面？

我有这样的代码：

<input type="text" id="start" name="o">
<input type="text" id="end" name="d">
<input type="text" id="total" name="total" hidden="hidden">

<button onclick="calcRoute();" value="/index.php?route=information/mymove" >text</button>

<script>
      function calcRoute() {
        var start = document.getElementById('start').value;
        var end = document.getElementById('end').value;
        var request = {
          origin: start,
          destination: end,
          travelMode: google.maps.DirectionsTravelMode.DRIVING
        };
        directionsService.route(request, function(response, status) {
          if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
            computeTotalDistance(response);
          } 
        });
      }
      function computeTotalDistance(result) {
      var total = 0;
      var myroute = result.routes[0];
      for (i = 0; i < myroute.legs.length; i++) {
        total += myroute.legs[i].distance.value;
      }
      total = total / 1000.
      document.getElementById("total").value = total + " km";
      }
</script>

---

我认为您应该能够修改

computeTotalInstance

函数，以便在完成所有计算后，将总值添加到所需的隐藏输入中，然后提交表单

function computeTotalDistance(result) {
    var total = 0;
    var myroute = result.routes[0];
    for (i = 0; i < myroute.legs.length; i++) {
        total += myroute.legs[i].distance.value;
    }
    total = total / 1000;
    document.getElementById("total").value = total + " km";

    if( total && document.getElementById("total").value!='' ) document.getElementById("total").parentNode.submit();
}

，print_r（$_POST，true））； } ?> 谷歌地图：路线计算 #地图{ 宽度：800px； 高度：600px； 浮动：无； 保证金：自动； } 函数initMap（）{ 设_lat=56.55； 设_lng=-2.72； 让_form=document.querySelector（'form[name=“route plotter”]”）； 让latlng=newgoogle.maps.latlng（_-lat，_-lng）； 让选项={ 缩放：10， 中心：拉特林， mapTypeId:google.maps.mapTypeId.TERRAIN }; 让map=new google.maps.map（document.getElementById（'map'），选项）； const calcroute=函数（）{ 让请求={ 来源：document.getElementById（'start'）。值， 目标：document.getElementById（'end'）。值， travelMode:google.maps.Directions travelMode.DRIVING }; 让directionsService=new google.maps.directionsService（）； 让directionsDisplay=new google.maps.DirectionsRenderer（）； 路由（请求、功能（响应、状态）{ if（status==google.maps.directionstatus.OK）{ 方向显示。设置方向（响应）； 计算站（响应）； } }); }; 常量CalculateInstance=函数（结果）{ 设total=0； let route=result.routes[0]； route.legs.forEach（leg=>{ 总+=支腿距离值； }); document.getElementById（'total'）。value=total； _表单提交（）； }; _form.querySelector（'button'）。addEventListener（'click'，calcroute，false） } 走远一点

---

一些重要的事情：您需要使此按钮成为一个正确的提交按钮，您需要确保它返回回调，而不是直接调用函数，并且您需要确保回调返回false。这是如何防止在不运行脚本的情况下发送表单的默认行为

文本
函数calcRoute（）{
var start=document.getElementById（'start'）.value；
var end=document.getElementById（'end'）.value；
var请求={
来源：start，
目的地:完，
travelMode:google.maps.Directions travelMode.DRIVING
};
路由（请求、功能（响应、状态）{
if（status==google.maps.directionstatus.OK）{
方向显示。设置方向（响应）；
计算机支持（响应）；
} 
});
返回false；
}
函数ComputeTotalInstance（结果）{
var合计=0；
var myroute=result.routes[0]；
对于（i=0；i

您应该使用类似于

ajax

的方法将数据传递到另一个页面。为什么不设置cookie？可能您可以在一个页面中设置cookie，然后从另一个页面访问它？哪个

其他页面

？你指的是

index.php吗？route=information/mymove

？您需要将数据传递到另一个页面的目的是什么？您需要将哪些特定数据发送到其他页面？我已经厌倦了您的建议，但仍然不起作用至少第一个建议似乎隐藏的输入字段不包含数据。在第二个页面上，我不知道如何在另一个页面上显示ajax帖子，只是不工作，就像以前一样。隐藏的输入字段保持为空。您是否至少可以检查函数是否被调用（提示：console.log并在浏览器中调试），然后确保所有服务（google、DirectionService等）都已正确初始化并在函数范围内可用。因为如果它们不是，它甚至可能会无声地失败（没有错误），并且您的ComputeTotalInstance将永远不会被调用。请尝试使用strict进行检查。我无法调试这篇文章，因为它不是与上下文隔离的，如果我对javascript文档的这部分使用此按钮，您也不会显示上下文。getElementById（“total”）.innerHTML=parseFloat（Math.round（total*100）/100/1.60934.toFixed（2）+“miles”；然后，总英里数或公里数将显示在id=“total”处，以便正常工作。问题是，服务器无法将数据传递到另一个页面。

function computeTotalDistance(result) {
    var total = 0;
    var myroute = result.routes[0];
    for (i = 0; i < myroute.legs.length; i++) {
        total += myroute.legs[i].distance.value;
    }
    total = total / 1000;
    document.getElementById("total").value = total + " km";

    if( total && document.getElementById("total").value!='' ) document.getElementById("total").parentNode.submit();
}

function computeTotalDistance(result) {
    var total = 0;
    var myroute = result.routes[0];
    for (i = 0; i < myroute.legs.length; i++) {
        total += myroute.legs[i].distance.value;
    }
    total = total / 1000;
    document.getElementById("total").value = total + " km";

    /* send the total by ajax to endpoint url */
    ajax.call( this, url, 'total='+total, (r)=>{
        alert(r);
    } );
}


function ajax( url, params, callback ){
    with( new XMLHttpRequest() ){
        onreadystatechange=function(e){
            if( this.status==200 && this.readyState==4 ){
                callback.call( this.response )
            }
        }
        open( 'POST', url, true );
        setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        send( params );
    }
}

<?php
    if( $_SERVER['REQUEST_METHOD']=='POST' ){
        /* 
            consider this as "another page" - the form has submitted to here
            and you can see the POST data...
        */
        exit(printf('<pre>%s</pre>',print_r($_POST,true)));
    }
?>
<!doctype html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <title>Google Maps: Route Calculations</title>
        <style>
            #map{
                width:800px;
                height:600px;
                float:none;
                margin:auto;
            }
        </style>
        <script>
            function initMap(){
                let _lat = 56.55;
                let _lng = -2.72;
                let _form = document.querySelector( 'form[name="route-plotter"]' );

                let latlng=new google.maps.LatLng( _lat, _lng );
                let options = {
                    zoom: 10,
                    center: latlng,
                    mapTypeId: google.maps.MapTypeId.TERRAIN
                };
                let map = new google.maps.Map( document.getElementById('map'), options );

                const calcroute=function(){
                    let request = {
                        origin: document.getElementById('start').value,
                        destination: document.getElementById('end').value,
                        travelMode: google.maps.DirectionsTravelMode.DRIVING
                    };

                    let directionsService = new google.maps.DirectionsService();
                    let directionsDisplay = new google.maps.DirectionsRenderer();

                    directionsService.route(request, function(response, status) {
                        if ( status == google.maps.DirectionsStatus.OK ) {

                            directionsDisplay.setDirections( response );
                            calculatedistance( response );
                        } 
                    });
                };
                const calculatedistance=function(result){
                    let total=0;
                    let route=result.routes[0];
                    route.legs.forEach( leg=>{
                        total+=leg.distance.value;
                    });
                    document.getElementById('total').value=total;
                    _form.submit();
                };

                _form.querySelector('button').addEventListener('click',calcroute,false)
            }
        </script>
        <script async defer src='//maps.googleapis.com/maps/api/js?key=APIKEY&callback=initMap'></script>
    </head>
    <body>
        <div id='map'></div>
        <form name='route-plotter' method="post">
            <input type="text" id="start" name="start" value="dundee" />
            <input type="text" id="end" name="end" value="aberdeen" />
            <input type="text" id="total" name="total" hidden="hidden">        
            <button type="button">Go get the distance</button>
        </form>
    </body>
</html>

<form action="index.php?route=information/mymove" method="post">
    <input type="text" id="start" name="o">
    <input type="text" id="end" name="d">
    <input type="text" id="total" name="total" hidden="hidden">        
    <button type="submit" onclick="return calcRoute();">text</button>
</form>

<script>
      function calcRoute() {
        var start = document.getElementById('start').value;
        var end = document.getElementById('end').value;
        var request = {
          origin: start,
          destination: end,
          travelMode: google.maps.DirectionsTravelMode.DRIVING
        };
        directionsService.route(request, function(response, status) {
          if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
            computeTotalDistance(response);
          } 
        });
        return false;
      }
      function computeTotalDistance(result) {
      var total = 0;
      var myroute = result.routes[0];
      for (i = 0; i < myroute.legs.length; i++) {
        total += myroute.legs[i].distance.value;
      }
      total = total / 1000.
      document.getElementById("total").value = total + " km";
      }
</script>