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

Question

我有这样的代码：

<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>

如果我将此代码用于按钮：

<input type="button" value="go" onclick="calcRoute();"> 这会执行 javascript 函数，但不会将数据传递到另一个页面。

我在控制器文件中也有这部分：

if (isset($this->request->post['o'])) {
            $data['o'] = $this->request->post['o'];
        }

        if (isset($this->request->post['d'])) {
            $data['d'] = $this->request->post['d'];
        }

        if (isset($this->request->post['total'])) {
            $data['total'] = $this->request->post['total'];
        }

Answer 1

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

<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>

Answer 2

我认为您应该能够修改computeTotalDistance 函数，以便在所有计算完成后将总值添加到所需的隐藏输入中，然后提交表单。

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();
}

另一种选择是使用相同的回调函数将 ajax 请求发送到相同的端点 url。

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 );
    }
}

最初并没有说您希望在另一个页面中view 总计，只是您希望将值发送到另一个页面。因为这是一个要求，所以在这种情况下，ajax 根本不是最好的选择——因为有一个表单应该在我最初修改的函数尝试做的时候提交。

更新： 完整的示例，经过测试和工作，可以模拟您的代码尝试执行的操作。

<?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>