如何通过一次按钮点击同时执行PHP函数与JavaScript函数？

嘿，这个问题其实很常见，核心矛盾就是表单提交会触发页面刷新——要么JS执行完页面就刷新，效果瞬间消失；要么阻止刷新，PHP又接收不到请求没法执行逻辑。我给你两个实用的解决方案，你可以根据自己的需求选：

这个方案的思路是把表单的同步提交改成异步请求，这样既能让PHP执行业务逻辑，又不会刷新页面，JS的显示隐藏效果就能一直保留。

步骤1：修改按钮类型 #

把按钮的type="submit"改成type="button"，避免默认的表单提交行为：

<form id="form1" action="<?=$_SERVER['PHP_SELF'];?>" method="post">
<button type="button" id="jahrgang1" name="j1" class="btn jahrgang1">Jahrgang 1</button><br>
<button type="button" id="jahrgang2" name="j2" class="btn jahrgang2">Jahrgang 2</button><br>
<button type="button" id="jahrgang3" name="j3" class="btn jahrgang3">Jahrgang 3</button><br>
<button type="button" id="jahrgang4" name="j4" class="btn jahrgang4">Jahrgang 4</button><br>
</form>

步骤2：编写AJAX逻辑 #

给每个按钮绑定点击事件，先执行JS的显示隐藏，再发送异步请求触发PHP函数：

// 获取所有按钮元素
const buttons = document.querySelectorAll('#form1 .btn');

buttons.forEach(button => {
  button.addEventListener('click', function() {
    // 先执行JS的显示隐藏逻辑
    startseiteContainerElement.classList.add("hide")
    schwierigkeitContainerElement.classList.add("hide")
    anleitungContainerElement.classList.add("hide")
    aufgabeEinfachContainerElement.classList.remove("hide")
    hptmContainerElement.classList.remove("hide")
    
    // 构造POST数据，模拟原来的表单提交
    const formData = new FormData();
    formData.append(this.name, '1'); // 传递按钮的name参数
    
    // 发送AJAX请求
    fetch('<?=$_SERVER['PHP_SELF'];?>', {
      method: 'POST',
      body: formData
    })
    .then(response => response.text())
    .then(data => {
      // 这里可以处理PHP返回的结果（如果需要的话）
      console.log('PHP逻辑执行完成:', data);
    })
    .catch(error => {
      console.error('请求出错:', error);
    });
  });
});

步骤3：保留原PHP逻辑 #

你的PHP判断代码完全不用改，因为AJAX发送的POST参数和原来的表单提交是一致的：

if(array_key_exists('j1', $_POST)) { j1(); }
if(array_key_exists('j2', $_POST)) { j2(); }
if(array_key_exists('j3', $_POST)) { j3(); }
if(array_key_exists('j4', $_POST)) { j4(); }

如果你的业务逻辑必须依赖页面刷新（比如需要重新渲染页面内容），可以让PHP先执行逻辑，然后在页面加载完成后自动触发JS的显示隐藏。

步骤1：修改PHP逻辑，添加标志位 #

在执行对应函数后设置一个标志，标记需要执行JS：

$runJS = false;

if(array_key_exists('j1', $_POST)) { 
  j1(); 
  $runJS = true;
}
if(array_key_exists('j2', $_POST)) { 
  j2(); 
  $runJS = true;
}
if(array_key_exists('j3', $_POST)) { 
  j3(); 
  $runJS = true;
}
if(array_key_exists('j4', $_POST)) { 
  j4(); 
  $runJS = true;
}

步骤2：在页面底部输出JS代码 #

在</body>标签之前，根据标志位输出JS，让页面加载完成后自动执行：

<?php if($runJS): ?>
<script>
window.addEventListener('load', function() {
  // 这里是你的显示隐藏逻辑
  startseiteContainerElement.classList.add("hide")
  schwierigkeitContainerElement.classList.add("hide")
  anleitungContainerElement.classList.add("hide")
  aufgabeEinfachContainerElement.classList.remove("hide")
  hptmContainerElement.classList.remove("hide")
});
</script>
<?php endif; ?>

这样页面刷新后，JS会在所有元素加载完成后执行，你就能看到预期的显示隐藏效果了。

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