使用Ajax传递经纬度变量至PHP时页面空白，请求协助

嘿，我来帮你捋捋这个问题！页面空白大概率是前端请求没正常发起、后端没正确处理/输出内容，或者你没把后端返回结果显示出来导致的，咱们一步步排查：

一、先补全前端关键代码（你提供的showPosition函数不完整） #

你获取到地理位置后，得在showPosition里发起Ajax请求把数据传给后端，而且要处理成功/失败的情况，不然出错了也看不到原因。给你个完整的示例：

<html>
<head>
  <!-- 先确认jQuery路径正确！如果路径错了，$会未定义 -->
  <script type="text/javascript" src="js/jquery.js"></script>
  <script>
    function getLocation() {
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition, showError); // 建议加上错误回调
      } else {
        alert("你的浏览器不支持地理定位");
      }
    }

    function showPosition(position) {
      const longitude = position.coords.longitude;
      const latitude = position.coords.latitude;
      
      // 发起Ajax请求
      $.ajax({
        url: 'test.php', // 确认这个路径和test.php的位置匹配
        type: 'POST',
        data: {
          longitude: longitude, // 键名要和后端接收的对应
          latitude: latitude
        },
        success: function(response) {
          // 关键！要把后端返回的内容显示到页面上，不然页面还是空白
          console.log("后端返回结果：", response);
          document.body.innerHTML = "<h3>处理结果：</h3>" + response;
        },
        error: function(xhr, status, error) {
          // 请求失败时也要提示，不然你根本不知道出错了
          console.error("请求出错：", error);
          document.body.innerHTML = "请求失败：" + error;
        }
      });
    }

    // 加上定位失败的回调，排查定位问题
    function showError(error) {
      switch(error.code) {
        case error.PERMISSION_DENIED:
          alert("用户拒绝了地理定位请求");
          break;
        case error.POSITION_UNAVAILABLE:
          alert("位置信息不可用");
          break;
        case error.TIMEOUT:
          alert("请求位置超时");
          break;
        case error.UNKNOWN_ERROR:
          alert("未知错误");
          break;
      }
    }

    // 记得调用getLocation触发流程
    window.onload = getLocation;
  </script>
</head>
<body>
</body>
</html>

二、后端test.php要确保正确接收并输出内容 #

后端必须接收参数，处理后输出内容（echo），不然前端收不到返回，页面还是空白。同时建议开启错误显示，排查PHP语法错误：

<?php
// 开启错误显示，方便排查问题
error_reporting(E_ALL);
ini_set('display_errors', 1);

// 检查参数是否存在
if(isset($_POST['longitude']) && isset($_POST['latitude'])){
  $lon = $_POST['longitude'];
  $lat = $_POST['latitude'];
  
  // 这里写你的业务逻辑，比如存数据库、计算等
  $processResult = "成功接收经纬度：<br>经度：{$lon}<br>纬度：{$lat}";
  
  // 必须输出内容，前端才能拿到
  echo $processResult;
} else {
  echo "错误：未接收到经纬度参数";
}
?>

三、关键调试步骤（必做！） #

• 检查jQuery是否加载成功：打开浏览器控制台（F12）→ Console标签，看有没有$ is not defined的错误，如果有，说明js/jquery.js路径不对，改成正确的相对路径或者用CDN版本。
• 查看请求状态：打开F12→Network标签，发起请求后看有没有test.php的请求：
  • 如果看不到请求：说明前端代码没触发Ajax，检查getLocation是否被调用，showPosition是否执行。
  • 如果请求状态是404：说明test.php的路径写错了，调整$.ajax里的url参数。
  • 如果请求状态是500：说明PHP有语法错误，看Response里的错误信息。
• 检查请求参数和返回内容：在Network里点击test.php的请求，看Request Payload有没有传过去的经纬度，看Response有没有后端输出的内容。

内容的提问来源于stack exchange，提问作者Ismail Issa