JavaScript中Ajax POST数据丢失问题排查

首先得明确一个核心概念：页面首次加载时的PHP执行，和你通过AJAX发起的POST请求是完全独立的两次HTTP请求——这就是你遇到所有问题的根源。

为什么页面上的print_r($_POST)是空的？ #

当你第一次打开index.php时，服务器会执行这个脚本并返回HTML页面给浏览器，这个时候浏览器还没执行JavaScript的地理位置获取和AJAX请求，所以这次请求的$_POST数组本来就是空的，页面上自然输出空数组。

而你在控制台看到的正确$_POST数据，是来自AJAX发起的第二次POST请求——这个请求是页面加载完成后，浏览器在后台偷偷发的，服务器单独处理这次请求，返回的数据只会传给AJAX的success回调函数，不会影响已经渲染好的页面内容。

为什么写文件后同脚本读不到，但表单提交的脚本能读到？ #

同样的道理：AJAX请求触发的index.php是单独的服务器进程，它把坐标写入/tmp/fish后，这个进程就结束了。而你初始页面的PHP代码早就执行完了，根本不会去读取这个文件；只有当你发起新的请求（比如表单提交）时，新的PHP进程才会去读取已经存在的文件内容。

无需文件中转的解决方案 #

你想要直接在脚本内处理数据，其实只需要调整前后端的交互逻辑：

方案1：前端通过AJAX获取数据后渲染页面（推荐）

让AJAX请求的PHP脚本返回结构化的坐标数据（比如JSON），然后在前端的success回调里把数据插入到页面对应元素中。你已经在尝试这个方法了，优化一下代码确保能正常工作：

首先修改PHP部分（index.php）：

<?php
// 判断是否是AJAX请求
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['lat'], $_POST['long'])) {
    // 这里可以直接处理坐标数据，比如存入数据库、计算等
    $response = [
        'lat' => $_POST['lat'],
        'long' => $_POST['long']
    ];
    // 返回JSON格式数据
    header('Content-Type: application/json');
    echo json_encode($response);
    exit; // 处理完AJAX请求后直接退出，避免输出页面其他内容
}
// 下面是页面初始渲染的代码
?>
<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <button onclick="geoFindMe()">获取我的位置</button>
    <div id="out"></div>
    <div>纬度：<span id="lat"></span></div>
    <div>经度：<span id="long"></span></div>

    <script type="text/javascript">
    function geoFindMe() {
      var output = document.getElementById("out");
      function success(position) {
        var latitude = position.coords.latitude;
        var longitude = position.coords.longitude;
        $.ajax({
          type: 'POST',
          url: 'index.php',
          data: { lat: latitude, long: longitude },
          dataType: 'json', // 指定接收JSON格式数据
          success: function( data ) {
            console.log( data );
            $("#lat").html("<b>" + data.lat + "</b>");
            $("#long").html("<b>" + data.long + "</b>");
          },
          error: function(xhr, status, error) {
            output.innerHTML = "请求出错：" + error;
          }
        });
      }
      function error() {
        output.innerHTML = "Unable to retrieve your location";
      }
      navigator.geolocation.getCurrentPosition(success, error);
    }
    </script>
</body>
</html>

方案2：先获取坐标再刷新页面（适合需要服务器端渲染数据的场景）

如果你需要在页面初始渲染时就用坐标数据，可以先通过JS获取坐标，然后用GET参数跳转页面：

function success(position) {
  var latitude = position.coords.latitude;
  var longitude = position.coords.longitude;
  // 跳转到带坐标参数的页面
  window.location.href = 'index.php?lat=' + latitude + '&long=' + longitude;
}

然后在PHP里直接读取$_GET：

<?php
if (isset($_GET['lat'], $_GET['long'])) {
    $lat = $_GET['lat'];
    $long = $_GET['long'];
    // 在这里处理坐标数据
    echo "纬度：$lat，经度：$long";
}
?>

总结 #

你之前的困惑都是因为混淆了服务器端页面渲染和客户端AJAX异步请求的生命周期——这两个过程是完全独立的，$_POST只属于当前请求，不会在不同请求之间共享。用AJAX的方式直接在前端渲染数据，是最流畅的解决方案，不需要文件中转。

内容的提问来源于stack exchange，提问作者C. Gombola