有没有办法在PHP代码运行之前在html中添加加载程序？

我有一个名为

sample.PHP

的PHP文件，它有以下代码：

<?php
$transactionId = $_GET['id'];

$url = $transactionId;
header("Location: $url");
?>

---

你能建议我做些什么改变吗？或者我做错了什么

---

非常感谢您的阅读

TL；DR:PHP代码是从后端执行的，而不是从前端执行的。因此，您不能在等待PHP执行（后端）时放置加载动画（前端），因为后端总是先运行。您需要使用Javascript+Ajax来实现这一点。另外，header函数

header（“Location:$url”）

有几个非常重要的概念，你应该关注，以更好地理解为什么你的要求不能直接实现：

1。后端/前端

PHP在后端（服务器）上运行。HTML/CSS和加载动画在用户前端（浏览器）上运行。因为后端代码总是在显示到前端之前运行，所以当PHP在单个页面中执行时，不能放置加载动画

如何解决这个问题需要使用Javascript和ajax调用

全流程为：


PHP呈现初始页面（无需花费大量时间的操作）
HTML/CSS与加载动画一起呈现到浏览器
JAVASCRIPT通过Ajax调用后端的新实例
PHP运行长脚本并将结果传递回Javascript
JAVASCRIPT更新页面，删除加载或执行任何其他需要执行的操作

你需要看看Javascript和Ajax，这样才能继续，你可以在网上找到很多资源

2。标题功能

PHP中的头函数必须位于任何输出之前。所以你不能使用
标题（“Location:$url”）在HTML的中间。这是因为头是服务器发送到浏览器的第一条指令

如果您只是在寻找前端的重定向，您可以使用META或Javascript
位置。href
我创建了以下代码供您参考或学习。你可以根据需要使用它

我还在PHP端添加了sleep函数，因此您可以检查加载程序，因为在我的端，由于没有服务器端处理，所以不需要花费时间

HTML/JS端代码


<style>
#loader {
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid rgba(89,59,0,100);
    width: 120px;
    height: 120px;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
    margin: auto;
    margin-top: 15%;
}

/* Safari */
@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
</style>
<form method="GET" action="action.php" onsubmit="submit_form();">
    <label>
        Transaction ID:
    </label>
    <input type="text" name="id" value="https://google.com.pk" />
    <br /><br />
    <input type="submit" name="submit" value="Submit" />
</form>
<div id="loader" style="display: none;"></div>
<script>
function submit_form()
{
    document.getElementById("loader").style.display = "";
}
</script>


#装载机{
边框：16px实心#F3；
边界半径：50%；
边框顶部：16px固体rgba（89,59,0100）；
宽度：120px；
高度：120px；
-webkit动画：旋转2s线性无限；/*Safari*/
动画：旋转2s线性无限；
保证金：自动；
利润率最高：15%；
}
/*狩猎*/
@-webkit关键帧旋转{
0%{-webkit变换：旋转（0度）；}
100%{-webkit变换：旋转（360度）；}
}
@关键帧旋转{
0%{变换：旋转（0度）；}
100%{变换：旋转（360度）；}
}
事务ID:



函数提交表单（）
{
document.getElementById（“加载器”）.style.display=“”；
}

PHP/后端代码：

<?php
sleep(2);
$transactionId = $_GET['id'];
$url = $transactionId;
header("Location: $url");
?>




<style>
#loader {
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid rgba(89,59,0,100);
    width: 120px;
    height: 120px;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
    margin: auto;
    margin-top: 15%;
}

/* Safari */
@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
</style>
<form method="GET" action="action.php" onsubmit="submit_form();">
    <label>
        Transaction ID:
    </label>
    <input type="text" name="id" value="https://google.com.pk" />
    <br /><br />
    <input type="submit" name="submit" value="Submit" />
</form>
<div id="loader" style="display: none;"></div>
<script>
function submit_form()
{
    document.getElementById("loader").style.display = "";
}
</script>

<?php
sleep(2);
$transactionId = $_GET['id'];
$url = $transactionId;
header("Location: $url");
?>