禁用按钮会破坏 php post

Question

我有一个按钮，A) 执行 PHP 脚本，B) 具有在脚本运行时隐藏/显示加载指示器的功能。在脚本运行时，我想禁用该按钮。我遇到的问题是我可以禁用该按钮，但这会阻止 PHP 的东西运行。按钮<form method="post"><button id="CheckConnectionBtn" name="CheckConnectionBtn" class="CheckConnectionBtn"  button onclick="ShowWaiting()">Test connection</button></form>PHP<?phpif(isset($_POST['CheckConnectionBtn'])){ $output = shell_exec("/script.sh"); $_SESSION["CONNECTION_CHECK"] = "$output";}?>功能<script>function ShowWaiting() {document.getElementById("loader_id").style.display = "block";document.getElementById("loader_text_id").style.display = "block";}</script>我尝试添加$("#CheckConnectionBtn").attr("disabled", true);到该函数，但这会导致加载器无限期地显示，看来 PHP 没有被触发。我还尝试向按钮添加禁用的 onclick，但这只会导致页面刷新（加载程序显示一秒钟）并且似乎也不会触发 PHP。最后我尝试添加<script>$("#CheckConnectionBtn").attr("disabled", true);</script>对于 PHP，但这会导致页面在单击按钮之前不显示任何内容。如何禁用单击按钮但仍触发 php 和我的功能？

Answer 1

考虑以下代码。

$(function() {

  function showWaiting() {

    $("#loader_id, #loader_text_id").show();

  }

  function endWaiting() {

    $("#loader_id, #loader_text_id").hide()

  }

  

  $("#CheckConnectionBtn").click(function() {

    var self = $(this);

    $.ajax({

      url: "this.php",

      data: {

        CheckConnectionBtn: true

      },

      method: "POST",

      beforeSend: showWaiting,

      success: endWaiting

    });

  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="CheckConnectionBtn" class="CheckConnectionBtn">Test Connection</button>

利用$.ajax()，您可以设置 beforeSend 回调以开始加载图像，然后在成功回调中将其关闭。这不需要表单，因为它使用 AJAX 操作。显然，替换this.php为您的连接脚本的 URL。

Answer 2

首先将按钮替换为input type = button,Input尝试添加onclick = "return sub();"function sub() {document.getElementById('btn').disabled = true;//我要找的ID因为这里是输入标签的ID// document.forms[0].submit();}