Я не знаю, почему мой код не работает, я пытаюсь отправить координаты с JavaScript на PHP с помощью AJAX, и я могу извлекать значения из JavaScript в текстовое поле, но значения не передаются на PHP. Любая помощь высоко ценится.
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script> <script> function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } } function showPosition(position) { document.getElementById("getlat").value = position.coords.latitude; document.getElementById("getlon").value = position.coords.longitude; } $( document ).ready(function() { $.ajax({url:"samepage3.php",type:"POST",async:false, data:{getlat:$("#getlat").val(),getlon:$("#getlon").val()} }); }); </script> </head> <body onload="getLocation()"> <input type="text" id="getlat" name="getlat" /> <input type="text" id="getlon" name="getlon" /> <?php if(isset($_POST["getlat"])) { $lat = $_POST["getlat"]; echo $lat; } if(isset($_POST["getlon"])) { $lon = $_POST["getlon"]; echo $lon; } ?> </body> </html> ОБНОВЛЕНИЕ 1:
Я запускаю этот код в файле samepage3.php, и мне нужно, чтобы действие выполнялось на одной странице без перезагрузки страницы
Вы не можете выполнить PHP-скрипт на той же странице 3.php после полной загрузки страницы. Я предлагаю отделить страницу и создать ответ с помощью AJAX. Что-то вроде этого.
Файл index.php
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script> <script> function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } } function showPosition(position) { document.getElementById("getlat").value = position.coords.latitude; document.getElementById("getlon").value = position.coords.longitude; } function fireAjax(){ $.ajax({url:"response.php",type:"POST",async:false, data:{getlat:$("#getlat").val(),getlon:$("#getlon").val()}, success: function (response){ $('#response').html(response); } }); } </script> </head> <body onload="getLocation()"> <input type="text" id="getlat" name="getlat" /> <input type="text" id="getlon" name="getlon" /> <button onclick="fireAjax()" >Send</button> <div id="response"> </div> </body> </html>
Файл response.php
<?php if (isset($_POST["getlat"])) { $lat = $_POST["getlat"]; echo 'Latitude: ', $lat, '<br/>'; } if (isset($_POST["getlon"])) { $lon = $_POST["getlon"]; echo 'Longitude : ', $lon; }
Коренной причиной является то, что функция getLocation будет большой задержкой, поэтому вам нужно запустить ajax-вызов после завершения getLocation. См. Пересмотренный вариант удара:
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script> <script> function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } } function showPosition(position) { document.getElementById("getlat").value = position.coords.latitude; document.getElementById("getlon").value = position.coords.longitude; $.ajax({url:"samepage3.php",type:"POST",async:false, data:{getlat:$("#getlat").val(),getlon:$("#getlon").val()} }); } $( document ).ready(function() { }); </script> </head> <body onload="getLocation()"> <input type="text" id="getlat" name="getlat" /> <input type="text" id="getlon" name="getlon" /> <?php if(isset($_POST["getlat"])) { $lat = $_POST["getlat"]; echo $lat; } if(isset($_POST["getlon"])) { $lon = $_POST["getlon"]; echo $lon; } ?> </body> </html>
Единственное изменение – это вызов ajax в функции showPosition.
Во-первых, отделите обработку PHP. Теперь после получения местоположения с использованием обратного вызова выполните AJAX. Образец кода:
samepage3.php
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script> <script> function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } } function showPosition(position) { $("#getlat").val(position.coords.latitude); $("#getlon").val(position.coords.longitude); $.ajax({ url: 'request.php', type: 'POST', dataType: 'JSON', data:{ getlat: $("#getlat").val(), getlon: $("#getlon").val() }, success: function(response) { console.log(response); } }); } $(document).ready(function() { getLocation(); }); </script> <body> <input type="text" id="getlat" name="getlat" /> <input type="text" id="getlon" name="getlon" />
request.php
<?php if($_SERVER['REQUEST_METHOD'] == 'POST') { $lat = $_POST["getlat"]; $lon = $_POST["getlon"]; echo json_encode(array('lat' => $lat, 'lon' => $lon)); exit; } ?>
Единственной целью AJAX является выборка и отправка данных с сервера без перезагрузки страницы.
Вам не нужны данные с сервера. Вам нужны данные из координат BROWSER, а именно – геолокации, поэтому AJAX и php не имеют никакого отношения к тому, что вам нужно делать здесь. Это можно сделать в чистом HTML.
С другой стороны, если вы хотите сделать что-то вроде сохранения координат в базе данных или использовать IP-адрес в качестве резервной копии, когда навигатор не поддерживает геолокацию, тогда вы можете использовать помощь сервера, и AJAX вступает в игру ,
Просто замените вашу функцию ajax на getLocation() .
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script> <script> function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); }else{ console.warn("Can't geolocate!"); //this would be a good place to fall back on geolocation by IP (AJAX necessary) } } function showPosition(position) { console.info('Latitude: ' + position.coords.latitude); document.getElementById("getlat").value = position.coords.latitude; console.info('Longitude: ' + position.coords.longitude); document.getElementById("getlon").value = position.coords.longitude; } $( document ).ready(function() { getLocation(); }); </script> </head> <body> <input type="text" id="getlat" name="getlat" /> <input type="text" id="getlon" name="getlon" /> </body> </html>