使用AJAX将数据发布到PHP

Question

我是AJAX和JavaScript的新手，所以如果我表现愚蠢，请原谅我，但我试图将变量routeMid传递给php页面processing.php（最好自动计算出一个routeMid），我尝试了此代码，但它破坏了整个网页。 我将代码片段与遇到麻烦的ajax部分和php代码附在了下一页上，因此对您的帮助将不胜感激。 再次感谢！

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">

</script>
<script type ="text/javascript" src="http://www.geocodezip.com/scripts/v3_epoly.js"></script>
<script type="text/javascript">
  var directionDisplay;
  var directionsService = new google.maps.DirectionsService();
  var map;
  var polyline = null;
  var infowindow = new google.maps.InfoWindow();
  var addresses = <?php echo json_encode($addresses); ?>;

function createMarker(latlng, label, html) {
    var contentString = '<b>'+label+'</b><br>'+html;
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        title: label,
        zIndex: Math.round(latlng.lat()*-100000)<<5
        });
        marker.myname = label;

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(contentString+"<br>"+marker.getPosition().toUrlValue(6)); 
        infowindow.open(map,marker);
        });
    return marker;
}

  function initialize() {
    directionsDisplay = new google.maps.DirectionsRenderer({suppressMarkers:true});
    var chicago = new google.maps.LatLng(41.850033, -87.6500523);
    var myOptions = {
      zoom: 6,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: chicago
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    polyline = new google.maps.Polyline({
    path: [],
    strokeColor: '#FF0000',
    strokeWeight: 3
    });
    directionsDisplay.setMap(map);
    calcRoute();
  }

  function calcRoute() {
    var start = addresses[0];
    var end = addresses[1];
    var travelMode = google.maps.DirectionsTravelMode.DRIVING

    var request = {
        origin: start,
        destination: end,
        travelMode: travelMode
    };
    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        polyline.setPath([]);
        var bounds = new google.maps.LatLngBounds();
        startLocation = new Object();
        endLocation = new Object();
        directionsDisplay.setDirections(response);
        var route = response.routes[0];
        var summaryPanel = document.getElementById("directions_panel");
        summaryPanel.innerHTML = "";

        // For each route, display summary information.
    var path = response.routes[0].overview_path;
    var legs = response.routes[0].legs;
        for (i=0;i<legs.length;i++) {
          if (i == 0) { 
            startLocation.latlng = legs[i].start_location;
            startLocation.address = legs[i].start_address;
            marker = createMarker(legs[i].start_location,"midpoint","","green");
          }
          endLocation.latlng = legs[i].end_location;
          endLocation.address = legs[i].end_address;
          var steps = legs[i].steps;
          for (j=0;j<steps.length;j++) {
            var nextSegment = steps[j].path;
            for (k=0;k<nextSegment.length;k++) {
              polyline.getPath().push(nextSegment[k]);
              bounds.extend(nextSegment[k]);
            }
          }
        }

        polyline.setMap(map);

        computeTotalDistance(response);
      } else {
        alert("directions response "+status);
      }
    });
  }

var totalDist = 0;
var totalTime = 0;

      function computeTotalDistance(result) {
      totalDist = 0;
      totalTime = 0;
      var myroute = result.routes[0];
      for (i = 0; i < myroute.legs.length; i++) {
        totalDist += myroute.legs[i].distance.value;
        totalTime += myroute.legs[i].duration.value;      
      }
      putMarkerOnRoute(50);
      var routeMid = putMarkerOnRoute(50);
      document.getElementById("hiddenVal").value = routeMid;


            $(".clickable").click(function() {
                //alert($(this).attr('id'));
                $.ajax({
                    type: "POST",
                    url: 'processing.php',
                    data: { value : routeMid }
                });
            });
        });


      totalDist = totalDist / 1000.
      }

      function putMarkerOnRoute(percentage) {
        var distance = (percentage/100) * totalDist;
        var time = ((percentage/100) * totalTime/60).toFixed(2);
        var routeMidpoint;
        if (!marker) {
          marker = createMarker(polyline.GetPointAtDistance(distance),"time: "+time,"marker");
          routeMidpoint = polyline.GetPointAtDistance(distance);
        } else {
          marker.setPosition(polyline.GetPointAtDistance(distance));
          marker.setTitle("time:"+time);
          routeMidpoint = polyline.GetPointAtDistance(distance);
        }
        return routeMidpoint;
      }
</script>

processing.php

<?php
echo $_POST["value"];
?>

Answer 1

我认为这是您要实现的目标：

$(document).ready(function() {

function computeTotalDistance() {
      totalDist = 0;
      totalTime = 0;
      var myroute = result.routes[0];
      for (i = 0; i < myroute.legs.length; i++) {
        totalDist += myroute.legs[i].distance.value;
        totalTime += myroute.legs[i].duration.value;      
      }
      putMarkerOnRoute(50);
      var routeMid = putMarkerOnRoute(50);
      document.getElementById("hiddenVal").value = routeMid;

      $.ajax({
         type: "POST",
         url: 'processing.php',
         data: { value : routeMid },
         success:function(result){
            alert("returned from php page: " + result);
         }
      });

      totalDist = totalDist / 1000.


       }

});

然后，您可以使用ajax result 。 我不确定您要使用click()完成什么。 如果您尝试调用上述函数，那么它将起作用：

$(".clickable").click(function() {
 computeTotalDistance();
});