Javascript 使用AJAX将数据发布到PHP

我不熟悉AJAX和JavaScript，所以请原谅我的愚蠢行为，但我试图将变量RouteID传递给php页面处理。php（最好自动计算一个RouteID）我尝试了这段代码，但它破坏了整个网页。我在下一页附上了我遇到问题的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>

方向显示；
var directionsService=new google.maps.directionsService（）；
var映射；
var polyline=null；
var infowindow=new google.maps.infowindow（）；
var地址=；
函数createMarker（板条、标签、html）{
var contentString=''+label+'
'+html；
var marker=new google.maps.marker({
位置：latlng，
地图：地图，
标题：标签，
zIndex:Math.round（latlng.lat（）*-100000）我想这就是你想要实现的目标：

$(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.


       }

});

您的document ready函数应该存在于CMOputeTotalInstance函数调用之外。事实上，您的所有ComputeTotalInstance逻辑可能都应该存在于click handler函数中，尽管还不清楚您的
结果
值来自何处。我编辑了代码以反映页面的整个JavaScript部分。我将此解决方案删除，但它不起作用。非常感谢您的帮助！从ComputeTotalInstance函数中删除您的单击函数。没有充分的理由将其包含在其中。您也没有对ajax结果执行任何操作。请参阅我的ajax函数的成功选项。感谢您的帮助。因此，我删除了单击函数，但是uld$（document）.ready（function（）{封装整个javascript代码或仅封装ComputeTotalInstance函数？再次感谢您的帮助！$（document）.ready（）可以在脚本标记中封装所有javascript，但您应该知道它的功能。它基本上只需等待文档（DOM）即可在加载js之前已完全加载，因此对于操作DOM的函数，有必要
$(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.


       }

});

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