如何正确将HTML表单提交的PHP变量传递给JavaScript

你写的echo "var thedata = ".$table.";\n";存在JS语法错误，这是赋值失效的核心原因。
PHP中存储表名的$table是字符串类型，直接拼接到JS代码时没有添加字符串边界引号，最终输出到前端的代码会变成var thedata = 你的表名;，JS引擎会把表名解析为未定义的变量标识符，而非字符串值，直接抛出引用错误，赋值自然失败。

举个例子，如果$table的值为residential_poi，你当前代码输出的JS内容为：

var thedata = residential_poi; // 抛出Uncaught ReferenceError: residential_poi is not defined

不要手动拼接引号，用json_encode()处理变量是最稳妥的方案，它会自动匹配JS语法规则、转义特殊字符，从根源避免语法错误，写法如下：

echo "var thedata = " . json_encode($table) . ";\n";

这行代码最终输出的结果为var thedata = "residential_poi";，完全符合JS语法规范。

如果改完仍不生效，按以下顺序排查：

• 检查代码执行顺序：thedata的定义语句必须放在L.WFST初始化代码之前。如果WFST初始化逻辑写在页面头部，而PHP输出变量的代码写在页面底部，执行时变量还未定义，必然读不到值。
• 检查变量作用域：在echo语句前加临时调试代码var_dump($table);，确认当前作用域下的$table是有效表名，不是null或空值——常见问题是cURL创建图层的逻辑把表名存在了局部变量里，到输出JS的位置已经无法读取到值。
• 检查输出是否正常渲染：在浏览器打开页面后右键选择「查看页面源代码」，搜索var thedata，确认这行代码确实存在、值正确。如果找不到这行内容，说明PHP逻辑没有走到echo步骤，或是被输出缓冲规则拦截了。

正确代码结构参考 #

<!-- 优先定义全局变量，放在所有依赖脚本的最前面 -->
<script>
<?php
// 此处$table替换为你实际存储新表名的变量，确保是cURL创建图层成功后的有效值
echo "var thedata = " . json_encode($table) . ";\n";
?>
</script>
<!-- 之后加载第三方依赖库 -->
<script src="/static/leaflet/leaflet.js"></script>
<script src="/static/leaflet/Leaflet-WFST.min.js"></script>
<script>
// 地图初始化逻辑
const map = L.map('mapContainer').setView([39.9, 116.4], 12);
L.tileLayer('你的瓦片地图服务地址').addTo(map);

// WFST图层初始化，直接引用thedata变量
const wfstLayer = new L.WFST({
  url: '你的Geoserver服务地址/geoserver/wfs',
  typeNS: '你的Geoserver工作区名称',
  typeName: thedata, // 直接使用前面定义的变量即可
  geometryField: 'geom',
  // 其余原有配置保持不变
}).addTo(map);
</script>

验证方法 #

部署后打开浏览器F12控制台：

1. 在控制台直接输入thedata回车，能正常输出表名字符串、没有报thedata is not defined错误，说明传值成功。
2. 如果传值成功但图层加载失败，排查Geoserver的WFS跨域配置、图层权限、工作区匹配规则即可，和PHP传值逻辑无关。

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