我需要将函数中的 java-script 变量的值分配给同一文件中的 php 变量

Question

I need to get the total value inside the computeTotalDistance() function into php variable. I tried it many ways but was pointless.

            var rendererOptions = {
                draggable: true
            };
            var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
            ;
            var directionsService = new google.maps.DirectionsService();
            var map;

            var Srilanka = new google.maps.LatLng(6.9344, 79.8428);

            function initialize() {

                var mapOptions = {
                    zoom: 8,
                    center: Srilanka
                };
                map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
                directionsDisplay.setMap(map);

                google.maps.event.addListener(directionsDisplay, 'directions_changed', function () {
                    computeTotalDistance(directionsDisplay.getDirections());
                });

                calcRoute();
            }

            function calcRoute() {

                var locations = ['Galle', 'Kandy', 'minneriya wildlife park', 'Horton Plains'];

                var waypoints = locations.map(function(loc) {
                    return { 'location': loc };
                });

                var request = {
                    origin: 'Colombo',
                    destination: 'Colombo',
                    waypoints: waypoints,
                    travelMode: google.maps.TravelMode.DRIVING
                };


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

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

            google.maps.event.addDomListener(window, 'load', initialize);

        </script>

I used following one, but I confused with how to catch return value with it.

 <?php
      $tot = echo "<script>document.writeln();</script>";
  ?> 

how could I assign this total distance value in to $tot value.

Answer 1

You are getting confused by two languages being present. You forget that your Javascript will run on the client, in the browser. PHP will run on the server. The only way to get the JavaScript value to your server is to HTTP POST/GET it to the server, using a hidden field in a HTTP form or an via ajax call.

Answer 2

Only way I can think of is to use JavaScript to send the URL back with a parameter in it such as:

http://www.example.com/index.php?id=1

... By using something like this, you can apply it in JavaScript:

window.location.href="index.php?value=1";

Then in the PHP code use $_GET :

$somevar = $_GET["value"]; //puts the uid varialbe into $somevar

Answer 3

The JavaScript we are presented with here is client-side...

Since PHP is on the server-side level, we'd have to reach for it via HTTP requests. HTTP requests is basically communication between the client and server.

JavaScript had a handly little library implemented into it called Ajax, which stands for Asynchronous JavaScript and XML (XML isn't really important here).

Ajax allows us to perform HTTP requests asynchronously with in the script, and use the response that the server has as well.

To make thing's syntactically more understandable, I'll be using jQuery, which provides an easy-to-use Ajax library ...

With this provided, you can construct a request and also handle the response fairly easily...... Lets try this for example:

$.ajax({
  "url": "index.php",
  "type": "POST",
  "data": {"testing":true},
  "success": function(response){
    console.log(response);
  }
});

This provided, we take our index.php file, and say we had the following code:

<?php
  if(isset($_POST["testing"])) {
    echo $_POST["testing"] ? "Hello" : "Goodbye";    
  }
?>

Now back to the Ajax function.... In the "success" handler, we tell it to log whatever the response is.... Since our PHP is designed to say either "Hello" or "Goodbye" based on the value of the "testing" data we sent, this would provide a pretty straight-forward response... And in our case, it would log "Hello" .

That shows how you can create a relationship between the client and server through Ajax, allowing us to exchange data back and forth more easily.