使用POST将JS值传递给PHP（无需提交和刷新）

Question

I have google map in my website which is updating geocoordinats when dragging marker and shows address. JS passing values of X and Y to html "ID". I can send data by "GET", but I need to pass these values using POST and get in in another page to do INSERT command. Please help anyone, stucked 4 days in same thing.

PS header is busy and i need wihtout submit, cause it is already in FORM with submit button.

 var geocoder = new google.maps.Geocoder(); function geocodePosition(pos) { geocoder.geocode({ latLng: pos }, function(responses) { if (responses && responses.length > 0) { updateMarkerAddress(responses[0].formatted_address); } else { updateMarkerAddress('Cannot determine address at this location.'); } }); } function updateMarkerStatus(str) { document.getElementById('markerStatus').innerHTML = str; } function updateMarkerPosition(latLng) { document.getElementById('x').innerHTML = [ latLng.lat() ]; } function updateMarkerPositions(latLng) { document.getElementById('y').innerHTML = [ latLng.lng() ]; } function updateMarkerAddress(str) { document.getElementById('address').innerHTML = str; } function initialize() { var latLng = new google.maps.LatLng(-28.010299474408573, 153.39518896484606); var map = new google.maps.Map(document.getElementById('mapCanvas'), { zoom: 8, center: latLng, mapTypeId: google.maps.MapTypeId.ROADMAP }); var marker = new google.maps.Marker({ position: latLng, title: 'Point A', map: map, draggable: true }); geocodePosition(latLng); // Add dragging event listeners. google.maps.event.addListener(marker, 'dragstart', function() { updateMarkerAddress(''); }); google.maps.event.addListener(marker, 'drag', function() { updateMarkerStatus(''); updateMarkerPosition(marker.getPosition()); updateMarkerPositions(marker.getPosition()); var js_var= marker.getPosition(); document.getElementById("link").onclick = function () { // ajax start var xhr; if (window.XMLHttpRequest) xhr = new XMLHttpRequest(); // all browsers else xhr = new ActiveXObject("Microsoft.XMLHTTP"); // for IE var url = 'process.php?js_var=' + js_var; type: 'POST'; xhr.open('POST', url, false); xhr.onreadystatechange = function () { if (xhr.readyState===4 && xhr.status===200) { var div = document.getElementById('infos'); div.innerHTML = xhr.responseText; } } xhr.send(); // ajax stop return false; } }); google.maps.event.addListener(marker, 'dragend', function() { updateMarkerStatus(''); geocodePosition(marker.getPosition()); }); } // Onload handler to fire off the app. google.maps.event.addDomListener(window, 'load', initialize); 

 #mapCanvas { width: 97%; height: 400px; float: left; } #infoPanel { float: left; margin-left: 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyAcxTuiDebbsXYlEFomC1VEhvzD7_nB7Nc&sensor=false"></script> <pre><div><div id="mapCanvas"></div> <div id="infoPanel"> <b>Ünvan:</b> <div id="address"></div> <button href="#" id="link">Address accept</button> <div id="x" ></div> <div id="y" ></div> <div id="infos" ></div> <div id="markerStatus" style="display: none;"></div> </div></pre> 

I use second "PHP" code to get "$_GET" data.

 <?php if (isset($_GET['js_var'])) { $php_var = $_GET['js_var']; $subaftercomme= substr($php_var, 0, strpos($php_var, ',')); $getX = substr($subaftercomme, 1); echo "<input value=\\"$getX\\" disabled=\\"disabled\\" />"; $subfromcomma = substr($php_var, strpos($php_var, ",") + 1); $getY = substr($subfromcomma, 1, -1); echo "<input value=\\"$getY\\" disabled=\\"disabled\\" />"; echo "<button type=\\"hidden\\" name=\\"badu\\" value=\\" Testiqle\\" >hello</button>"; } else { $php_var = "<br />js_var is not set!"; echo $php_var; } ?> 

Answer 1

也许您忘记了设置POST请求的请求标头：

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

Answer 2

Based on the fact that you tagged this question with jQuery I'm going to use jquery (as I'm more familiar with it).

$.post("process.php",
  {
    "js_var": js_var
  },
  function(data, status)
  {
    var div = document.getElementById('infos');
    div.innerHTML = data;
    // not sure what your data returns but you might need to change it
  }
);

For more information click here