将JS值传递给PHP(无需提交和刷新)

Question

我的网站上有Google Map，该地图在拖动标记并显示地址时会更新地理界。JS将X和Y的值传递到HTML" ID"。我可以通过" get"发送数据，但是我需要使用帖子传递这些值并进入另一个页面以执行插入命令。请帮助任何人，在同一件事中陷入困境4天。

P.S。标题很忙，我需要提交，因为它已经与提交按钮相同。

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>

我使用第二个" php"代码获取" $ _get"数据。

<?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

基于您用jQuery标记这个问题的事实，我将使用jQuery（因为我更熟悉它）。

$.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
  }
);

有关更多信息，请单击此处