如何从JavaScript向PHP传递数组元素以进行后端处理？

看起来你这段代码是想循环遍历points数组里的坐标，逐个传给PHP后端的Distances.php处理对吧？不过这里藏着一个很常见的闭包陷阱问题，得先给你指出来：

问题所在 #

你用var声明的lat和lng是函数级作用域，在整个循环结束前，它们的值会一直被后续迭代覆盖。当onreadystatechange回调触发时，循环早就跑完了，所以所有请求拿到的都是最后一个points元素的坐标，这肯定不是你想要的结果。另外你代码里还漏了调用xmlhttp.send()发送请求，这会导致请求根本发不出去哦。

解决方案1：用let声明变量（ES6+推荐） #

利用let的块级作用域特性，每次循环都会创建新的变量绑定，确保回调能拿到当前迭代的坐标：

for(let i=0;i<points.length;++i){ 
  var xmlhttp = new XMLHttpRequest(); 
  var distancesObject = null; 
  // 用let替代var，创建块级作用域的变量
  let lat = points[i][LAT]; 
  let lng = points[i][LNG]; 
  xmlhttp.onreadystatechange = function() { 
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200){ 
      if(xmlhttp.response!=null){ 
        distancesObject = JSON.parse(xmlhttp.response); 
        // 这里可以处理当前坐标的返回结果，比如存入数组或更新页面
      } 
    } 
  }; 
  xmlhttp.open("GET", "Distances.php?lat=" + lat + "&lng=" + lng, true);
  xmlhttp.send(); // 别忘记发送请求！
}

解决方案2：立即执行函数（IIFE，兼容旧环境） #

如果你的项目需要支持不兼容ES6的旧浏览器，可以用立即执行函数把每次迭代的变量封装起来：

for(var i=0;i<points.length;++i){ 
  var xmlhttp = new XMLHttpRequest(); 
  var distancesObject = null; 
  // 用IIFE保存当前迭代的lat和lng
  (function(currentLat, currentLng) {
    xmlhttp.onreadystatechange = function() { 
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200){ 
        if(xmlhttp.response!=null){ 
          distancesObject = JSON.parse(xmlhttp.response); 
          // 处理当前结果
        } 
      } 
    }; 
    xmlhttp.open("GET", "Distances.php?lat=" + currentLat + "&lng=" + currentLng, true);
    xmlhttp.send();
  })(points[i][LAT], points[i][LNG]);
}

额外优化：减少HTTP请求次数 #

如果points数组元素很多，多次发送GET请求会影响性能。你可以把整个数组转换成JSON，一次性传给后端处理：

JS端代码

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
  if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
    if(xmlhttp.response!=null){
      var allDistances = JSON.parse(xmlhttp.response);
      // 这里拿到所有坐标的处理结果，统一处理
    }
  }
};
// 用POST请求传递JSON，避免URL长度限制
xmlhttp.open("POST", "Distances.php", true);
xmlhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
xmlhttp.send(JSON.stringify(points));

PHP端（Distances.php）代码

<?php
// 接收前端传来的JSON数据
$points = json_decode(file_get_contents('php://input'), true);
$distances = [];

foreach($points as $point) {
  $lat = $point[LAT]; // 注意这里的键要和JS里的LAT常量对应
  $lng = $point[LNG];
  // 在这里执行你的距离计算逻辑
  $distances[] = /* 计算后的结果 */;
}

// 返回所有结果的JSON
echo json_encode($distances);
?>

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