Использование AJAX для отправки переменных lat & lng в PHP для расчета близости

Для начала заблаговременно благодарим вас за понимание и помощь.

У меня есть база данных MySQL (единственная таблица, действительно) с 9 элементами для тестирования. Поля включают id, имя, адрес, город, штат, zip, lat, lng и т. Д. Моя цель – загрузить главную страницу с включенной информацией о местоположении, использовать Javascript, чтобы установить широту и долготу пользователя в качестве переменных, а затем использовать AJAX, отправить эти переменные на другую .php-страницу, чтобы переменные могли быть помещены в формулу расчета в моем запросе. Существует второй экземпляр AJAX, который затем извлекает результаты запроса с сервера после отправки переменных и обработки всей страницы.

Мой второй экземпляр AJAX очень успешно вызывает результаты со второй страницы. Если я вручную установил переменные, я получу свой список, отсортированный по сортировке, и если я полагаюсь на переменные Javascript, я получаю сообщение об ошибке. Я не знаю, где я ошибаюсь.

Я знаю, что это может показаться дублирующимся вопросом. Последние 8 часов я провел в SO, читая другие вопросы, которые, как я надеялся, мне помогли. К сожалению, каждый пример, который я пробовал, не работает.

Мой код на моей главной странице (test.php) таков:

<html><head></head><body> <script type="text/javascript"> if(navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { var lat = position.coords.latitude; var lng = position.coords.longitude; $.ajax({ type: "POST", url: "locations-ajax.php", data: 'x='+lat+'&y='+lng, }); }); } </script> <!--begin list area--> <script> function getXMLHttp() { var xmlHttp try { //Firefox, Opera 8.0+, Safari xmlHttp = new XMLHttpRequest(); } catch(e) { //Internet Explorer try { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) { try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) { alert("Your browser does not support AJAX!") return false; } } } return xmlHttp; } function MakeRequest() { var xmlHttp = getXMLHttp(); xmlHttp.onreadystatechange = function() { if(xmlHttp.readyState == 4) { HandleResponse(xmlHttp.responseText); } } xmlHttp.open("GET", "locations-test.php", true); xmlHttp.send(null); } function HandleResponse(response) { document.getElementById('listarea').innerHTML = response; } </script> <div class="container"><input type='button' onclick='MakeRequest();' value='Get List'/></div> <div class="container"><div id="listarea"> </div></div></div> </body> </html> 

Моя страница для создания моего отсортированного списка такова: (locations-test.php)

 <?php /* $x = 32.839001; $y = -79.852316; */ mysql_connect("localhost", "root", "") or die(mysql_error()); echo "Connected to MySQL<br />"; mysql_select_db("test_db") or die(mysql_error()); echo "Connected to Database <br>"; // Make a MySQL Connection $x = @$_POST['x']; $y = @$_POST['y']; if (!empty($x)){ echo 'x not empty'; }else{ echo 'x is not set or empty'; } echo "$x"; echo "<br>"; if (!empty($y)){ echo 'y not empty'; }else{ echo 'y is not set or empty'; } echo "<br>"; $query = "SELECT * , ( 3959 * acos( cos( radians($x) ) * cos( radians( lat ) ) * cos( radians( lng ) - radians($y) ) + sin( radians($x) ) * sin( radians( lat ) ) ) ) AS distance FROM locations HAVING distance < 2500 ORDER BY distance LIMIT 0 , 20;"; $result = mysql_query($query) or die(mysql_error()); while($row = mysql_fetch_array( $result )) { echo "<div class='row'><div class='logo'><img src='foo.png' width='20' height='20'></div><div class='siteblock'><div class='sitename'>"; echo $row['site_name']; echo "</div><div class='address'>"; echo $row['street_number']; echo " "; echo $row['street_name']; echo "</div></div></div>"; } ?> 

Я оставил свои тесты в коде, но прокомментировал это. Если я назначу переменным значение, я получаю правильные результаты в своей таблице, и он отлично выводится на test.php.

Страница подключается к базе данных просто отлично, но значения для lat и lng не переходят из test.php в location-test.php.

Я действительно не уверен, что мне не хватает, но, надеюсь, это что-то простое. Я запускаю бит WAMP 64 с PHP 5.4.3, MySQL 5.5.24 и Apache 2.2.22.

Я бы предпочел, чтобы это было надзором с моей стороны, а не с чем-либо еще.

Поскольку вы используете jQuery, нет абсолютно никакой необходимости использовать функции XMLHTTP. Кроме того, похоже, что вы пытаетесь отправить данные через jQuery и получать через XMLHTTP; это неверно. Вы можете переписать свой код следующим образом:

 if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function (position) { $.ajax({ type: "POST", url: "locations-ajax.php", data: { x: position.coords.latitude, y: position.coords.longitude }, success: function (data) { $("#listarea").html(data); } }); }); } 

Если вы рассматриваете использование JQuery для запроса ajax, вы должны закодировать данные, которые хотите отправить в качестве объекта,

 $.ajax({ type: "POST", url: "locations-ajax.php", data: { lat: lat, lng: lng } }); 

Это должно отправить данные на сервер, как ожидает ваш php. Также обратите внимание, что после последнего параметра для запроса ajax в вашем предыдущем коде была запятая.


Но без Jquery кажется, что вы не отправляете какие-либо переменные в свою функцию MakeRequest . Вам нужно будет добавить код геолокации и отправить координаты оттуда,

 function MakeRequest() { if(navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { var lat = position.coords.latitude; var lng = position.coords.longitude; var xmlHttp = getXMLHttp(); xmlHttp.onreadystatechange = (function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { HandleResponse(xmlHttp.responseText); } }); xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xmlHttp.open("POST", "Encoder/Index", true); xmlHttp.send("x=" + lat + "&y=" + lng); }); } } 

Это должно достичь вашей цели.