使用AJAX將JavaScript變量從JavaScript傳遞到PHP

Question

我的PHP文件存在一些問題。所以基本上我正在從一個項目獲取用戶的兩個地址，然後使用javascript顯示他們的路線，一旦他們點擊提交，我想將這兩個變量傳遞給PHP文件。我研究了很多，發現我需要AJAX調用。我遇到的問題是AJAX調用完美，但是當我去到PHP文件時，它會拋出一個錯誤，指出變量沒有被定義。有人請向我解釋我在這裏做錯了什麼。

JavaScript代碼：

/* ============================================================================================ 
    Reference: https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-directions 
    ============================================================================================== 
    */ 
    function initMap() { 
    var map = new google.maps.Map(document.getElementById('map'), { 
     mapTypeControl: false, 
     center: {lat: 41.881832, lng: -87.623177}, 
     zoom: 13 
    }); 

    new AutocompleteDirectionsHandler(map); 
    } 

    /** 
    * @constructor 
    */ 
    function AutocompleteDirectionsHandler(map) { 
    this.map = map; 
    this.originPlaceId = null; 
    this.destinationPlaceId = null; 
    this.travelMode = 'DRIVING'; 
    var originInput = document.getElementById('origin-input'); 
    var destinationInput = document.getElementById('destination-input'); 
    var submit_button = document.getElementById('button-to-submit'); 
    /*var modeSelector = document.getElementById('mode-selector');*/ 
    this.directionsService = new google.maps.DirectionsService; 
    this.directionsDisplay = new google.maps.DirectionsRenderer; 
    this.directionsDisplay.setMap(map); 

    var originAutocomplete = new google.maps.places.Autocomplete(
     originInput, {placeIdOnly: true}); 
      var destinationAutocomplete = new google.maps.places.Autocomplete(
     destinationInput, {placeIdOnly: true}); 

    /*this.setupClickListener('changemode-walking', 'WALKING'); 
    this.setupClickListener('changemode-transit', 'TRANSIT'); 
    this.setupClickListener('changemode-driving', 'DRIVING');*/ 

    this.setupPlaceChangedListener(originAutocomplete, 'ORIG'); 
    this.setupPlaceChangedListener(destinationAutocomplete, 'DEST'); 

    this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(originInput); 
    this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(destinationInput); 
    this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(submit_button); 
    /*this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(modeSelector);*/ 
    } 

    // Sets a listener on a radio button to change the filter type on Places 
    // Autocomplete. 
    /* AutocompleteDirectionsHandler.prototype.setupClickListener = function(id, mode) { 
    var radioButton = document.getElementById(id); 
    var me = this; 
    radioButton.addEventListener('click', function() { 
     me.travelMode = mode; 
     me.route(); 
    }); 
    }; */ 

    AutocompleteDirectionsHandler.prototype.setupPlaceChangedListener = function(autocomplete, mode) { 
    var me = this; 
    autocomplete.bindTo('bounds', this.map); 
    autocomplete.addListener('place_changed', function() { 
     var place = autocomplete.getPlace(); 
     if (!place.place_id) { 
     window.alert("Please select an option from the dropdown list."); 
     return; 
     } 
     if (mode === 'ORIG') { 
     me.originPlaceId = place.place_id; 
     } else { 
     me.destinationPlaceId = place.place_id; 
     } 
     me.route(); 
    }); 

    }; 

    AutocompleteDirectionsHandler.prototype.route = function() { 
    if (!this.originPlaceId || !this.destinationPlaceId) { 
     return; 
    } 
    var me = this; 

    this.directionsService.route({ 
     origin: {'placeId': this.originPlaceId}, 
     destination: {'placeId': this.destinationPlaceId}, 
     travelMode: this.travelMode 
    }, function(response, status) { 
     if (status === 'OK') { 
     me.directionsDisplay.setDirections(response); 
     origin_addr = document.getElementById('origin-input').value; 
     //console.log(origin_addr); 
     destination_addr = document.getElementById('destination-input').value; 
     //console.log(destination_addr); 
     //var place_id = document.getElementById('origin-input'); 
     } else { 
     window.alert('Directions request failed due to ' + status); 
     } 
    }); 

    }; 

    $("#button-to-submit").click(function() { 
    $.ajax({ 
     url: "Database/save-points.php", 
     type: "POST", //send it through get method 
     data: { 
      origin_address: origin_addr, 
      destination_address: destination_addr 
      }, 
      success: function(response) { 
     //Do Something 
      console.log("Succeed"); 
      location.href="Database/save-points.php"; 
      }, 
      error: function(xhr) { 
    //Do Something to handle error 
      } 
     }); 
}); 

PHP代碼：

<?php 
    $origin_address = $_POST['origin_address']; 
    $destination_address = $_POST['destination_address']; 
    echo $origin_address; 
    echo $destination_address; 
?> 

Answer 1

/* maps.php */

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" dir="ltr"> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.js" type="text/javascript"></script> 
<style> 
    /* Always set the map height explicitly to define the size of the div 
    * element that contains the map. */ 
    #map { 
    height: 100%; 
    } 
    /* Optional: Makes the sample page fill the window. */ 
    html, body { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    } 
    .controls { 
    margin-top: 10px; 
    border: 1px solid transparent; 
    border-radius: 2px 0 0 2px; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    height: 32px; 
    outline: none; 
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); 
    } 

    #origin-input, 
    #destination-input { 
    background-color: #fff; 
    font-family: Roboto; 
    font-size: 15px; 
    font-weight: 300; 
    margin-left: 12px; 
    padding: 0 11px 0 13px; 
    text-overflow: ellipsis; 
    width: 200px; 
    } 

    #origin-input:focus, 
    #destination-input:focus { 
    border-color: #4d90fe; 
    } 

    #mode-selector { 
    color: #fff; 
    background-color: #4d90fe; 
    margin-left: 12px; 
    padding: 5px 11px 0px 11px; 
    } 

    #mode-selector label { 
    font-family: Roboto; 
    font-size: 13px; 
    font-weight: 300; 
    } 

</style> 
</head> 
<body> 
<input id="origin-input" class="controls" type="text" 
    placeholder="Enter an origin location"> 

<input id="destination-input" class="controls" type="text" 
    placeholder="Enter a destination location"> 

<div id="mode-selector" class="controls"> 
    <input type="radio" name="type" id="changemode-walking" checked="checked"> 
    <label for="changemode-walking">Walking</label> 

    <input type="radio" name="type" id="changemode-transit"> 
    <label for="changemode-transit">Transit</label> 

    <input type="radio" name="type" id="changemode-driving"> 
    <label for="changemode-driving">Driving</label> 

    <input type="submit" id="button-to-submit" value="SAVE !" /> 
</div> 

<div id="map"></div> 
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOU_KEY&libraries=places"></script> 
<script type="text/javascript"> 
    // This example requires the Places library. Include the libraries=places 
    // parameter when you first load the API. For example: 

    function initMap() { 
    var map = new google.maps.Map(document.getElementById('map'), { 
     mapTypeControl: false, 
     center: {lat: -33.8688, lng: 151.2195}, 
     zoom: 13 
    }); 

    new AutocompleteDirectionsHandler(map); 
    } 

    /** 
    * @constructor 
    */ 
    function AutocompleteDirectionsHandler(map) { 
    this.map = map; 
    this.originPlaceId = null; 
    this.destinationPlaceId = null; 
    this.travelMode = 'WALKING'; 
    var originInput = document.getElementById('origin-input'); 
    var destinationInput = document.getElementById('destination-input'); 
    var modeSelector = document.getElementById('mode-selector'); 
    this.directionsService = new google.maps.DirectionsService; 
    this.directionsDisplay = new google.maps.DirectionsRenderer; 
    this.directionsDisplay.setMap(map); 

    var originAutocomplete = new google.maps.places.Autocomplete(
     originInput, {placeIdOnly: true}); 
    var destinationAutocomplete = new google.maps.places.Autocomplete(
     destinationInput, {placeIdOnly: true}); 

    this.setupClickListener('changemode-walking', 'WALKING'); 
    this.setupClickListener('changemode-transit', 'TRANSIT'); 
    this.setupClickListener('changemode-driving', 'DRIVING'); 

    this.setupPlaceChangedListener(originAutocomplete, 'ORIG'); 
    this.setupPlaceChangedListener(destinationAutocomplete, 'DEST'); 

    this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(originInput); 
    this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(destinationInput); 
    this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(modeSelector); 
    } 

    // Sets a listener on a radio button to change the filter type on Places 
    // Autocomplete. 
    AutocompleteDirectionsHandler.prototype.setupClickListener = function(id, mode) { 
    var radioButton = document.getElementById(id); 
    var me = this; 
    radioButton.addEventListener('click', function() { 
     me.travelMode = mode; 
     me.route(); 
    }); 
    }; 

    AutocompleteDirectionsHandler.prototype.setupPlaceChangedListener = function(autocomplete, mode) { 
    var me = this; 
    autocomplete.bindTo('bounds', this.map); 
    autocomplete.addListener('place_changed', function() { 
     var place = autocomplete.getPlace(); 
     if (!place.place_id) { 
     window.alert("Please select an option from the dropdown list."); 
     return; 
     } 
     if (mode === 'ORIG') { 
     me.originPlaceId = place.place_id; 
     } else { 
     me.destinationPlaceId = place.place_id; 
     } 
     me.route(); 
    }); 

    }; 

    AutocompleteDirectionsHandler.prototype.route = function() { 
    if (!this.originPlaceId || !this.destinationPlaceId) { 
     return; 
    } 
    var me = this; 

    this.directionsService.route({ 
     origin: {'placeId': this.originPlaceId}, 
     destination: {'placeId': this.destinationPlaceId}, 
     travelMode: this.travelMode 
    }, function(response, status) { 
     if (status === 'OK') { 
     me.directionsDisplay.setDirections(response); 
     } else { 
     window.alert('Directions request failed due to ' + status); 
     } 
    }); 
    }; 

/************************************/ 
$(document).ready(function() { 
$("#button-to-submit").click(function() { 

origin_addr = $("#origin-input").val(); 
destination_addr = $("#destination-input").val(); 

     $.ajax({ 
     type: "POST", 
     url: "maps.exe.php", 
     data: { 
     origin_address: origin_addr, 
     destination_address: destination_addr 
     }, 
     success: function(response){ 
     alert(response); 
     window.location.href = 'test-resp.php?'+response; 
     } 
     }); 
     return false; 
     }); 
}); 
</script> 
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&libraries=places&callback=initMap" async defer></script> 
</body> 
</html> 

/* * maps.exe.php/

<?php 

$origin_address = $_POST['origin_address']; 
$destination_address = $_POST['destination_address']; 

echo"origin=$origin_address&destination=$destination_address"; 

?> 

/*測試resp.php */

<?php 

$origin_address = $_GET['origin']; 
$destination_address = $_GET['destination']; 

echo"[ origin : $origin_address/destination = $destination_address ]"; 

?> 

Answer 2

我路過JS變量PHP的我的例子。

JS（url和content是JS變量）：

var data_to_send = { 
    filepath: ""+url, 
    filecontent: ""+content 
}; 


jQuery.ajax({ 
    url:"php/dynamic.php", 
    data: data_to_send, 
    cache: false, 
    async: true, 
    type:'post', 
    timeout:3000//purely optionnal, check jQuery's Doc to learn more about ajax optionnal parameters/settings 
}); 

在dynamic.php：

<?php 

     $vars = serialize($_POST); /*easier access*/ 

     $file_path = "../".$vars["filepath"]; 
     $file_content = $var["filecontent"]; /*example of assigning a JS var's value to a PHP var*/ 
     $fh = fopen($file_path, 'w+') or die("could not open file"); 
     fwrite($fh, $file_content."\n"); 
     fclose($fh); 

    ?> 

PS：我使用jQuery的POST，我不知道的純JavaScript的方式做同樣的：/