Question

我在我的网站上有谷歌地图，在拖动标记和显示地址时更新geocoordinats。 JS将X和Y的值传递给html＆＃34; ID＆＃34;。我可以通过＆＃34; GET＆＃34;发送数据，但是我需要使用POST传递这些值并进入另一个页面来执行INSERT命令。请帮助任何人，在同样的事情中坚持4天。

P.S。标题很忙，我需要提交，因为它已经在FORM中提交按钮。

＆＃13;

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);

＆＃13;

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

＆＃13;

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

＆＃13;

我使用第二个＆＃34; PHP＆＃34;得到的代码＆＃34; $ _ GET＆＃34;数据

＆＃13;

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

＆＃13;

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

有关详情，请点击here

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

2 个答案: