JS检测按钮点击后执行PHP操作 现有实现代码失效问题排查

代码存在的核心问题 #

• 执行时机逻辑错误：PHP是服务端语言，在页面发送到客户端之前就已经全部执行完成，你写在if点击判断里的<?php echo $listaDatos; ?>会在页面加载时就直接输出，不会等到用户点击按钮才执行，完全达不到点击触发的效果。
• 点击事件绑定错误：JS原生没有element.clicked这个属性，你没有给按钮绑定点击事件监听器，这段判断逻辑只会在页面加载时执行一次，后续点击按钮不会触发任何代码。
• 语法错误：直接把JSON字符串输出到script标签中没有赋值、没有调用打印逻辑，会直接抛出JS语法异常，导致整个脚本失效。
• 按钮默认行为冲突：按钮的type为submit，如果放在form表单内会触发默认的表单提交、页面刷新行为，直接中断前端逻辑执行。

正确实现示例 #

<?php
// 输出按钮，type改成button避免默认提交行为
echo '<button type="button" id="enviarRecibos" class="btn btn-primary float-end">Imprimir Lista</button>'; 
?>
<script>
// 先把PHP的JSON数据提前注入到JS变量中，服务端渲染时就完成赋值
const printData = <?php echo $listaDatos; ?>;
// 给按钮绑定点击事件监听器
document.getElementById('enviarRecibos').addEventListener('click', function() {
    // 打印逻辑可根据需求调整，以下为示例：打开新窗口打印格式化后的JSON内容
    const printWin = window.open('', '_blank');
    printWin.document.write('<pre>' + JSON.stringify(printData, null, 2) + '</pre>');
    printWin.document.close();
    printWin.print();
    printWin.close();
});
</script>

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