点击FINISH按钮时将JS变量传递至PHP文件的实现问题

看起来你现在的问题是点击「FINISH」按钮时，AJAX请求还没完成页面就跳转了，导致JS变量没成功传到finalmap.php。咱们来一步步解决这个问题：

先说说现有代码的核心问题 #

• 你的表单是默认的GET提交，点击submit按钮时浏览器会立刻执行页面跳转，这时候AJAX请求大概率还没完成，数据根本没传过去
• 表单的action="./finalmap.php"和AJAX的url: "../finalmap.php"路径不一致，容易导致请求地址错误
• 没有阻止按钮的默认提交行为，两种提交逻辑冲突了

解决方案一：用AJAX处理数据传递，完成后再跳转 #

这种方式适合需要先异步验证或处理数据，再跳转的场景：

修改map.php的表单

<form>
  <input class="finish-button" type="submit" value="FINISH" onclick="return sendData();" />
</form>

完善map.js的sendData函数

function sendData() {
  // 先阻止表单的默认提交行为，避免页面直接跳转
  event.preventDefault();
  
  $.ajax({
    method: "POST",
    url: "./finalmap.php", // 和表单路径保持一致，避免路径错误
    data: { 
      selectedLoc: selectionArray, 
      startLoc: start, 
      endLoc: end, 
      dist: distance, 
      locTypes: allLocations 
    },
    success: function(response) {
      // AJAX请求成功后，再跳转到finalmap.php
      window.location.href = "./finalmap.php";
    },
    error: function(xhr, status, error) {
      // 可以在这里处理请求失败的情况，比如提示用户
      console.error("数据传递出错：", error);
    }
  });
  
  // 返回false，确保彻底阻止默认提交行为
  return false;
}

在finalmap.php中接收数据

// 用??运算符处理空值，避免Undefined index错误
$selectedLoc = $_POST['selectedLoc'] ?? [];
$startLoc = $_POST['startLoc'] ?? '';
$endLoc = $_POST['endLoc'] ?? '';
$dist = $_POST['dist'] ?? 0;
$locTypes = $_POST['locTypes'] ?? [];

// 接下来就可以根据需求处理这些数据了

解决方案二：把JS变量放到表单隐藏域，通过表单提交传递 #

如果不需要异步处理，直接把JS变量赋值给表单隐藏域，用表单POST提交更简单：

修改map.php的表单

<form action="./finalmap.php" method="POST">
  <!-- 添加隐藏域用来存储JS变量 -->
  <input type="hidden" id="selectedLoc" name="selectedLoc">
  <input type="hidden" id="startLoc" name="startLoc">
  <input type="hidden" id="endLoc" name="endLoc">
  <input type="hidden" id="dist" name="dist">
  <input type="hidden" id="locTypes" name="locTypes">
  
  <input class="finish-button" type="submit" value="FINISH" onclick="setFormData();" />
</form>

添加map.js的setFormData函数

function setFormData() {
  // 数组/对象要转成JSON字符串，否则表单无法完整传递复杂数据
  document.getElementById('selectedLoc').value = JSON.stringify(selectionArray);
  document.getElementById('startLoc').value = JSON.stringify(start);
  document.getElementById('endLoc').value = JSON.stringify(end);
  document.getElementById('dist').value = distance;
  document.getElementById('locTypes').value = JSON.stringify(allLocations);
  
  // 不用阻止默认行为，表单会正常提交
}

在finalmap.php中接收并解析数据

// 解析JSON字符串，还原成数组/对象
$selectedLoc = json_decode($_POST['selectedLoc'], true) ?? [];
$startLoc = json_decode($_POST['startLoc'], true) ?? [];
$endLoc = json_decode($_POST['endLoc'], true) ?? [];
$dist = $_POST['dist'] ?? 0;
$locTypes = json_decode($_POST['locTypes'], true) ?? [];

额外注意点 #

• 如果你的变量是数组或复杂对象，一定要转成JSON字符串传递，否则PHP接收不到完整数据
• 确保路径统一，AJAX的url和表单的action要指向同一个finalmap.php
• 处理PHP接收数据时的空值情况，避免报错

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