javascript - 无法从 PHP 检索 AJAX 数据

Question

我正在尝试创建一个简单的应用程序来查找您的位置，使用 AJAX 将坐标发送到 PHP 文件，然后计算 PHP 中的距离以显示附近的商店。

这是我的 Javascript 和 ajax:

$(document).ready(function($) {

// Check for GEOLOCATION support 
if (navigator.geolocation) {
window.onload = function() {
var startPos;
var lat;
var lon;
navigator.geolocation.getCurrentPosition(function(position) {
startPos = position;
document.getElementById('currentLat').innerHTML = startPos.coords.latitude;
document.getElementById('currentLon').innerHTML = startPos.coords.longitude;
drawMap(startPos);
}, 

function(error) {
document.getElementById('locationSupport').innerHTML = "Error code: " + error.code;
                            //   0 unknown error
                            //   1 permission denied
                            //   2 position unavailable (error response from locaton provider)
                            //   3 timed out
                        });
                    };
                }
                else {
                    document.getElementById("locationSupport").innerHTML = 'Geolocation is not supported.';
                }
            }); 

function drawMap(position) {
    var myLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
    var lat = position.coords.latitude;
    var lon = position.coords.longitude;
    var mapOptions = {
        zoom: 15,
        center: myLatLng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    var map = new google.maps.Map(document.getElementById('mapCanvas'), mapOptions);
    var userMarker = new google.maps.Marker({position: myLatLng, map: map});
    }       

     var jQT = new $.jQTouch({
                statusBar: 'black-translucent',
                useFastTouch: false, //required for Android
                preloadImages: []
            });

$.ajax({
   type     : "POST",
   url: "http://cs11ke.icsnewmedia.net/DVPrototype/external-data/location.php",
   data : {lat: 'lat', lon: 'lon'},
   dataType : "text",
   success: function(data){
     $("#shopsnotification").html(data);
   }
});   

然后在我的 PHP 中我使用:

<?php 
    $str_shopresult = '';
    mysqli_select_db($db_server, $db_database);
    $lat = $_POST['lat'];
    $lon = $_POST['lon'];
    $query = "SELECT name, address, 
    (6378.10 * ACOS(COS(RADIANS(latpoint)) * COS(RADIANS(lat)) * COS(RADIANS(longpoint) - RADIANS(lng)) + SIN(RADIANS(latpoint)) * SIN(RADIANS(lat)))) 
    AS distance FROM shops JOIN (SELECT '$lat' AS latpoint, '$lon' AS longpoint) AS p ORDER BY distance LIMIT 10"; 
    $result = mysqli_query($db_server, $query); 
        if (!$result) die("Database access failed: " . mysqli_error($db_server)); 
        while($row = mysqli_fetch_array($result)){ 
    $str_shopresult .= "<strong>" . $row['name']  . "</strong><br>" .
    $row['address'] . "<br><br>"; 
 } 

mysqli_free_result($result); 
echo $str_shopresult; 
mysqli_close($db_server); 
?> 

有人能明白为什么这不起作用吗？它似乎只是以随机顺序显示商店，而不是使用 $lat 和 $lon 变量。我检索数据错误吗？ ajax 正在显示数据，因此应该正确发送变量(我认为)

任何帮助将不胜感激!

Answer 1

按照 KSDaemon 的建议发送值，除此之外，将您的 $.ajax 方法移动到 navigator.geolocation.getCurrentPosition success 方法的末尾。否则，它可能会在页面准备好并且纬度和经度值已填充之前执行。

$(document).ready(function ($) {

  // Check for GEOLOCATION support 
  if (navigator.geolocation) {
    window.onload = function () {
      var startPos;
      var lat;
      var lon;
      navigator.geolocation.getCurrentPosition(function (position) {
          startPos = position;
          lat = startPos.coords.latitude;
          lon = startPos.coords.longitude;
          document.getElementById('currentLat').innerHTML = startPos.coords.latitude;
          document.getElementById('currentLon').innerHTML = startPos.coords.longitude;
          drawMap(startPos);

          $.ajax({
            type: "POST",
            url: "http://cs11ke.icsnewmedia.net/DVPrototype/external-data/location.php",
            data: {
              lat: lat,
              lon: lon
            },
            dataType: "text",
            success: function (data) {
              $("#shopsnotification").html(data);
            }
          });
        },

        function (error) {
          document.getElementById('locationSupport').innerHTML = "Error code: " + error.code;
          //   0 unknown error
          //   1 permission denied
          //   2 position unavailable (error response from locaton provider)
          //   3 timed out
        });
    };
  } else {
    document.getElementById("locationSupport").innerHTML = 'Geolocation is not supported.';
  }
});

function drawMap(position) {
  var myLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
  var lat = position.coords.latitude;
  var lon = position.coords.longitude;
  var mapOptions = {
    zoom: 15,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }

  var map = new google.maps.Map(document.getElementById('mapCanvas'), mapOptions);
  var userMarker = new google.maps.Marker({
    position: myLatLng,
    map: map
  });
}

var jQT = new $.jQTouch({
  statusBar: 'black-translucent',
  useFastTouch: false, //required for Android
  preloadImages: []
});