使用 AJAX 将纬度和 lng 变量发送到 PHP 以进行邻近计算 - Using AJAX to send lat & lng variables to PHP for proximity calculation

首先，提前感谢您的所有见解和帮助。

我有一个MySQL数据库（实际上是单个表），其中包含9个用于测试的条目。字段包括 ID、姓名、地址、城市、州、邮政编码、纬度、液化天然气等。我的目标是加载一个启用了位置感知的主页，使用 Javascript 将用户纬度和经度设置为变量，然后使用 AJAX 将这些变量发送到另一个.php页面，以便可以将变量放入我的查询中的计算公式中。还有第二个 AJAX 实例，在发送变量并处理整个页面后，该实例从服务器获取查询结果。

我的第二个 AJAX 实例非常成功地调用了第二页的结果。如果我手动设置变量，我会得到排序良好的列表，如果我依赖 Javascript 变量，我会得到一个错误。我不确定我哪里出错了。

我知道这似乎是一个重复的问题。在过去的 8 个小时里，我一直在阅读其他问题，我希望这些问题对我有所帮助。不幸的是，我尝试过的每个示例都不起作用。

我在主页（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>

我生成排序列表的页面是这样的：（位置测试.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>"; 
}
?>

我把我的测试留在了代码中，但注释掉了。如果我为变量赋值，我会在我的表中得到正确的结果，并且它输出得很好，可以很好地进行测试.php。

该页面可以很好地连接到数据库，但是lat和lng的值不会从test.php传递到location-test.php。

我

真的不确定我错过了什么，但希望它很简单。我正在运行带有PHP 5.4.3，MySQL 5.5.24和Apache 2.2.22的WAMP 64位。

我宁愿希望这是我的疏忽，而不是其他任何事情。

既然你使用的是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);
            }
        });
    });
}

如果你考虑对 ajax 请求使用 Jquery，你应该将要发送的数据编码为对象，

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

这应该可以实现您的目标。