Передача значений с JavaScript на PHP с использованием AJAX

Я не знаю, почему мой код не работает, я пытаюсь отправить координаты с 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, и мне нужно, чтобы действие выполнялось на одной странице без перезагрузки страницы

Solutions Collecting From Web of "Передача значений с JavaScript на PHP с использованием AJAX"

Вы не можете выполнить 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>