JavaScript变量作为PHP函数参数传递时报错问题咨询

问题根因 #

你遇到的问题核心是服务端PHP和客户端JS的执行时序完全错位：

• PHP是服务端语言，所有PHP代码会在服务器生成页面的阶段就全部执行完成，执行完毕后才会把生成的静态HTML/JS内容返回给用户浏览器。
• 而JS是客户端语言，只有当浏览器接收到服务器返回的静态内容后，才会开始解析执行JS代码。

你原来的写法里，JS函数内的matricule是JS运行时才会拿到的参数，PHP在服务器执行的时候根本感知不到这个变量的存在，你直接在PHP代码里写get_nom_prenom_chauffeur(matricule)，PHP会把matricule当成未定义的PHP变量处理，自然会报错，返回的内容自然不符合预期。

你把参数改成硬编码的330后，PHP在服务端执行时就能直接拿到正确的参数值，调用函数返回正确的结果嵌入到JS代码里，浏览器执行JS的时候拿到的就是已经生成好的正确字符串，所以运行正常。

至于console.log(matricule)能正常输出，是因为这一步完全是JS层面的执行，此时PHP已经执行完毕很久了，和PHP侧的错误没有关联。

正确实现方案 #

如果想要实现动态传入matricule参数获取司机信息的需求，有两种常用方案：

方案1：预生成全量数据映射 #

如果司机数据量不大，可以提前在服务端把所有司机的ID和对应姓名生成JS可直接读取的映射对象：

<?php
include 'fonctions.php';
// 提前查询所有司机的ID和姓名，生成关联数组
$allChauffeur = 自定义查询所有司机数据的方法();
?>
<input type="button" onClick="chauffeur_info(330);" />
<h1 id="header"></h1>
<script>
// 将PHP数组转成JS对象
const chauffeurMap = <?php echo json_encode($allChauffeur); ?>;
function chauffeur_info(matricule){
  console.log(matricule);
  const result = chauffeurMap[matricule] ?? '未找到对应司机信息';
  document.getElementById("header").innerHTML = result;
}
</script>

方案2：AJAX异步请求 #

如果司机数据量较大，或者数据有实时性要求，可以新增一个后端接口接收matricule参数，JS通过AJAX请求接口获取结果：

function chauffeur_info(matricule){
  console.log(matricule);
  // 调用后端接口拿数据，示例用fetch实现
  fetch('/get_chauffeur_info.php?matricule=' + matricule)
    .then(res => res.text())
    .then(result => {
      document.getElementById("header").innerHTML = result;
    })
}

对应的get_chauffeur_info.php里接收matricule参数，调用get_nom_prenom_chauffeur返回结果即可，注意做好参数校验避免SQL注入等安全问题。

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