PHP变量传递至JavaScript变量失败问题排查

我一眼就看出来问题出在哪了——独立的.js文件不会被你的PHP服务器解析！所以你在JS文件里写的<?php echo $totalImages; ?>根本不会被替换成实际的数值，只会被当作普通字符串原封不动输出到控制台。

给你几个靠谱的解决方案，按推荐程度排序：

方案1：在PHP页面中传递变量给JS函数（最直接） #

既然独立JS文件没法解析PHP，那咱们就在被PHP解析的页面里先拿到变量值，再把它作为参数传给JS函数。

步骤如下：

1. 在你的PHP页面底部，先写一段内嵌的<script>标签，拿到PHP变量后再调用独立JS里的函数：

<script>
$(document).ready(function() {
    // 这里的PHP代码会被正常解析，拿到真实的totalImages值
    const totalImages = <?php echo $totalImages; ?>;
    // 把变量作为第二个参数传给request_page函数
    request_page(1, totalImages);
});
</script>
<!-- 别忘了引入你的独立JS文件 -->
<script src="你的JS文件路径.js"></script>

2. 修改独立JS文件里的request_page函数，接收这个参数：

function request_page(pn, total) {
    console.log(total); // 现在就能输出正确的数值了
}

方案2：用HTML的data属性存储变量（更灵活） #

如果不想修改函数参数，你可以把PHP变量存在HTML元素的自定义data-*属性里，然后让JS从DOM中读取这个值。

1. 在PHP页面的某个元素（比如<body>）上添加data属性：

<body data-total-images="<?php echo $totalImages; ?>">

2. 在独立JS文件里读取这个属性：

function request_page(pn) {
    // 从body元素的data属性里获取值，记得转成数字类型
    const total = parseInt(document.body.dataset.totalImages, 10);
    console.log(total);
}

方案3：让服务器解析JS文件（不推荐） #

你也可以修改服务器配置，让.js文件也被PHP解析，但这种方法会让所有JS文件都走PHP处理流程，既影响性能又容易出问题，除非万不得已不建议用。比如在Apache的.htaccess里加：

AddHandler application/x-httpd-php .js

或者把JS文件后缀改成.php，然后在文件开头加上：

<?php header("Content-Type: application/javascript"); ?>

之后就能在里面写PHP代码了，但真的没必要这么折腾。

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