如何注册HTML按钮点击事件，解决点击无响应无法触发PHP的问题？

问题核心原因 #

*PHP 是服务端执行的脚本语言，会在页面从服务器发送到用户浏览器之前就跑完所有逻辑；而按钮点击是浏览器端的前端事件，发生在页面加载完成之后，二者没办法直接联动，这是你当前代码点击无响应的根本原因。

实现方案 #

方案1：表单提交（页面会刷新，实现最简单，适合不需要保留当前页面状态的场景） #

HTML 代码

<form method="post" action="你的逻辑处理文件路径.php">
    <button type="submit" class="btn btn-outline-danger btn-icon-text" name="LOAD">
        <i class="mdi mdi-upload btn-icon-prepend"></i>LOAD
    </button>
</form>

PHP 代码

<?php
// 所有使用$_SESSION的页面必须在最顶部先启动会话，且前面不能有任何输出
session_start();
if (isset($_POST['LOAD']))
{
    $_SESSION['LOAD'] = true;
    // 这里写你要执行的对应逻辑
    exit();
}
?>

方案2：AJAX 无刷新提交（页面不刷新，用户体验更好） #

HTML + JS 代码

<button type="button" class="btn btn-outline-danger btn-icon-text" id="LOAD">
    <i class="mdi mdi-upload btn-icon-prepend"></i>LOAD
</button>
<script>
// 给按钮绑定点击事件
document.getElementById('LOAD').addEventListener('click', function() {
    // 发送请求到后端PHP
    fetch('你的逻辑处理文件路径.php', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: 'LOAD=1'
    })
    .then(response => response.text())
    .then(result => {
        // 此处可处理PHP返回的结果，比如弹出提示操作成功
        console.log('操作完成', result)
    })
})
</script>

PHP 代码和方案1的PHP代码完全一致即可。

注意事项 #

• 代码中的你的逻辑处理文件路径.php需要替换为你实际存放PHP逻辑的文件路径，如果逻辑和HTML写在同一个文件里，直接填当前文件的名称即可。
• session_start() 必须放在PHP文件最顶部调用，前面不能有任何HTML输出、空格、换行，否则会报头错误。

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