我有一个HTML表单，如下所示，提交后由PHP:处理
<form action="<?php print $_SERVER['PHP_SELF'] ?>" method="POST" enctype="multipart/form-data" id="decisions_form">
<!-- ... -->
<div style="text-align:center;">
<input type="submit" name="submit" value="Submit Decisions" id="decisions_button">
</div>
</form>
PHP会进行一些处理，这可能需要几秒钟的时间。处理完成后，我刷新页面如下(可能不是最佳实践，我不知道(：
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// PHP...
}
echo ('<meta http-equiv="refresh" content="0.1;">');
?>
我想展示一个全屏"；装载器/旋转器"；，它将在提交之后和PHP处理期间被激活。通常，如果我理解正确，这个加载器/微调器应该被刷新页面命令中断——这就是我想要的
对于像我这样缺乏经验的人来说，寻找这样的装载机是不成功的，如果不是完全令人困惑的话
如果我能避免JS，并以纯HTML/CSS的方式来做它，那将是理想的选择(这可能吗？(。
我不知道有什么机制可以在纯HTML中实现这一点。可能还有其他比我下面展示的更复杂的方法可以做到这一点，但这对我来说很好。每次你对服务器进行调用时，ajax启动函数都会执行并延迟1秒(根据你的意愿更改延迟(，然后显示等待的gif。当完成服务器调用并停止等待gif并启用按钮时，调用ajaxStop函数。请注意，这应该是html文件中css定义之后的第一个标记。
Javascript代码
<script defer>
$( document ).ready(function() {
// gif on 1 second timer delay before displaying, so user does not have it appear to quickly if the delay is short.
var loadingTimer;
$(document).ajaxStart(function() {
$(':button').prop('disabled', true); // disable all the buttons
loadingTimer = setTimeout("$('#process-wait').show()", 1000); // show the waiting gif
});
$(document).ajaxStop(function() {
clearTimeout(loadingTimer);
$("#process-wait").hide(); // hide the waiting gif
$(':button').prop('disabled', false); // enable all the buttons
});
});
</script>
这是你需要配合的css。通过调整高度和宽度值，可以使其任意大。选择您自己的gif图片，只需将url参数设置为gif文件的目录路径和名称。
#process-wait {
background: transparent url(images/process-wait.gif);
background-repeat: no-repeat;
height: 150px;
width: 150px;
z-index: 99999;
display:none;
position: absolute;
top: 50%;
left: 50%;
margin-left: 10px;
margin-top: 0px;
transform: translate(-50%, -50%);
这里有一个完整的例子：
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
header("Content-Type: application/json");
echo json_encode($_SERVER);
exit;
}
?>
<!doctype html>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
<div hidden class="spinner-border text-primary" role="status">
<span class="sr-only">Loading...</span>
</div>
<form action="<?php print $_SERVER['PHP_SELF'] ?>" method="POST" enctype="multipart/form-data" id="decisions_form">
<input type="text" name="dummy" value="dummy value">
<!-- ... -->
<div style="text-align:center;">
<input type="submit" name="submit" value="Submit Decisions" id="decisions_button">
</div>
</form>
<div class="complete" hidden>
Submission received<br>
<button class="reset">Reset</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"></script>
<script>
window.addEventListener('load', () => {
const decisionsForm = document.querySelector('#decisions_form');
const spinner = document.querySelector('.spinner-border');
const complete = document.querySelector('.complete');
const resetButton = document.querySelector('.reset');
// Show spinner, hide form
function formSending() {
spinner.removeAttribute('hidden');
decisionsForm.style.display = 'none';
}
// Hide spinner, show complete message
function formSent() {
complete.removeAttribute("hidden");
spinner.setAttribute("hidden", true);
}
// Show form, hide everything else
function reset() {
decisionsForm.style.display = 'block';
spinner.setAttribute("hidden", true);
complete.setAttribute("hidden", true);
}
// Send form data in the background
async function submitDecisionsForm(event) {
// Display spinner
formSending();
// Collect data to send
// event.target = the form
// event.target.action the action property on <form action="">
// the POST body gets set by reading the data from the form object (event.target)
const response = await fetch(event.target.action, {method: "POST", body: new FormData(event.target)});
// Submit is complete.. show the complete message and reset button
formSent();
// Format the response if you want to use it later
const responseJson = await response.json(); // or response.text() depending on what send back from the server
// Output to browser's dev console for debugging
console.log(text);
}
// Capture submit event
decisionsForm.addEventListener("submit", (event) => {
// Stop form from submitting immediately by default
event.preventDefault();
// Send form data in the background
submitDecisionsForm(event);
});
// demo: reset the form when clicking the reset button
resetButton.addEventListener('click', reset);
});
</script>
有关零件的说明，请参见代码中的注释。