一键执行php函数和javascript函数答案

【问题标题】：Execute a php function and javascript function with one button click一键执行php函数和javascript函数
【发布时间】：2020-05-05 10:23:27
【问题描述】：

我想要做的是一个按钮单击调用一个 php 函数，该函数执行某些操作，还调用一个 javascript 函数，该函数检查按钮是否被单击并使 div 不可见和可见。

这是“表格”

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

这里是我想通过单击提交按钮来执行 php 函数的地方。这会调用一个简单的 php 函数。

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();
}

这是我的 javaScript 文件中的内容。

const form1 = document.getElementById("form1");
form1.addEventListener("submit", einfachBtn)

function einfachBtn() {
 startseiteContainerElement.classList.add("hide")
 schwierigkeitContainerElement.classList.add("hide")
 anleitungContainerElement.classList.add("hide")
 aufgabeEinfachContainerElement.classList.remove("hide")
 hptmContainerElement.classList.remove("hide")
}

如果我这样做，则调用 php 函数，您可以看到 JavaScript 代码确实被执行并隐藏了 div 并在瞬间显示了其他内容，但随后又回到了以前的状态，就像未调用 JavaScript 函数。

但是，如果我这样做，只有 JavaScript 代码会被执行，而 php 函数不会：

function einfachBtn(event) {
  event.preventDefault();
  startseiteContainerElement.classList.add("hide")
  schwierigkeitContainerElement.classList.add("hide")
  anleitungContainerElement.classList.add("hide")
  aufgabeEinfachContainerElement.classList.remove("hide")
  hptmContainerElement.classList.remove("hide")
}

有什么办法可以一键执行这两个功能吗？

提前致谢！

【问题讨论】：

您需要使用AJAX调用PHP而不需要重新加载页面。

标签： javascript php html button onclick

【解决方案1】：

通过将“event.preventDefault()”放入您的函数中，您实际上是在告诉该函数不要执行表单提交。您没有将整个代码放在这里，所以我只能猜测您将“脚本”标签放在标题上或需要隐藏的元素上方。我建议你把“script”标签放在“/body”标签的上方，你知道在程序的最后，所以它可以在执行javascript函数之前先渲染所有元素。

【讨论】：