如何通过点击按钮仅执行PHP指定代码块且不刷新当前页面

可以实现，但是你现有的代码不能直接达成目标，需要结合AJAX异步请求改造，具体方案如下：

现有代码的问题 #

• 原代码的提交按钮name属性为return，和你判断的$_GET['submit']不匹配，原本的判断逻辑根本不会触发
• 原生表单默认提交会刷新整个页面，不符合不刷新的要求
• BLOCK A和BLOCK B是绑定执行的，没有参数做区分，无法单独触发其中一个

改造方案 #

1. 服务端PHP逻辑调整 #

添加参数判断，根据请求参数决定执行哪个代码块，执行完成后直接返回结果中断后续HTML输出，避免影响请求返回：

<?php
if (isset($_GET['action'])) {
    header('Content-Type: application/json');
    if ($_GET['action'] === 'a') {
        // 原BLOCK A 逻辑写在这里
        echo json_encode(['code' => 0, 'msg' => 'BLOCK A 执行完成']);
        exit;
    } elseif ($_GET['action'] === 'b') {
        // 原BLOCK B 逻辑写在这里
        echo json_encode(['code' => 0, 'msg' => 'BLOCK B 执行完成']);
        exit;
    }
}
?>

2. 前端页面改造 #

去掉原生表单提交逻辑，给两个按钮分别绑定点击事件，通过Fetch API发起异步请求，请求过程不会刷新页面：

<!DOCTYPE html>
<html>
<body>
 <div>
   <input type="button" id="btnA" value="运行BLOCK A">
   <input type="button" id="btnB" value="运行BLOCK B"> 
 </div>
 <p id="tip"></p>
 <script>
// 绑定运行BLOCK A的事件
document.getElementById('btnA').addEventListener('click', () => {
    fetch('?action=a')
    .then(res => res.json())
    .then(res => {
        document.getElementById('tip').innerText = res.msg;
    })
})

// 绑定运行BLOCK B的事件
document.getElementById('btnB').addEventListener('click', () => {
    fetch('?action=b')
    .then(res => res.json())
    .then(res => {
        document.getElementById('tip').innerText = res.msg;
    })
})
 </script>
</body>
</html>

核心注意点 #

• 服务端处理完异步请求后必须加exit终止代码执行，不要返回页面的HTML内容
• 所有和后端的交互都走异步AJAX请求，不会触发页面重载，原有页面内容会完整保留
• 如果BLOCK A/B有输出内容，可以按需插入到页面指定位置，不需要刷新整个页面

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