2017-02-20 14 views
0

У меня есть карта google на моем веб-сайте, которая обновляет геокоординаты при перетаскивании маркера и показывает адрес. JS передает значения X и Y в html «ID». Я могу отправить данные с помощью «GET», но мне нужно передать эти значения с помощью POST и войти на другую страницу, чтобы выполнить команду INSERT. Пожалуйста, помогите всем, застрял 4 дня в одном и том же.Передайте значение JS для PHP с помощью POST (без отправки и обновления)

P.S. заголовок занят, и мне нужно wihtout submit, потому что он уже находится в FORM с кнопкой отправки.

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()); 
 
\t 
 

 
\t var js_var= marker.getPosition(); 
 
    \t \t document.getElementById("link").onclick = function() { \t \t \t 
 
\t \t \t // ajax start 
 
\t \t \t var xhr; 
 
\t \t \t if (window.XMLHttpRequest) xhr = new XMLHttpRequest(); // all browsers 
 
\t \t \t else xhr = new ActiveXObject("Microsoft.XMLHTTP"); \t // for IE 
 
\t \t \t 
 
\t \t \t var url = 'process.php?js_var=' + js_var; 
 
\t \t \t type: 'POST'; 
 
\t \t \t xhr.open('POST', url, false); 
 
\t \t \t 
 
\t \t \t xhr.onreadystatechange = function() { 
 
\t \t \t \t if (xhr.readyState===4 && xhr.status===200) { 
 
\t \t \t \t \t var div = document.getElementById('infos'); 
 
\t \t \t \t \t div.innerHTML = xhr.responseText; 
 
\t \t \t \t } 
 
\t \t \t } 
 
\t \t \t xhr.send(); 
 
\t \t \t // ajax stop 
 
\t \t \t return false; 
 
\t \t } 
 
\t 
 

 
    
 
    }); 
 

 
    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> 
 
\t <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 
 
\t if (isset($_GET['js_var'])) \t 
 
\t { 
 

 
\t $php_var = $_GET['js_var']; 
 

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

+3

звучит как вам просто нужно AJAX –

+0

Спасибо за ответ. Я попробовал uje AJAX, но все мои коды разбились и не могли отправлять данные с помощью POST. Может быть, вы знаете рабочий код для моего дела? –

+1

@OrkhanBagirov Что вы подразумеваете под 'crashed'? Какая ошибка? –

ответ

1

Может быть, вы забыли установить заголовок запроса для POST запроса:

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

К сожалению, этот код ниже не помогает. 'xhr.open ('POST', url, true); xhr.setRequestHeader ('Content-Type', 'application/x-www-form-urlencoded'); ' –

+1

Что вы делаете, передавая с помощью' xhr.send'? Попробуйте что-то вроде 'xhr.send (" js_var = "+ js_var)' или 'xhr.send (JSON.stringify (js_var))' – Siphalor

+0

Большое спасибо, это мне помогло!) Я полностью забыл про отправку) –

1

Исходя из того, что вы помеченной этот вопрос с 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

+0

Спасибо за помощь и ответ, этот тоже работает, но нужно менять!) –