如何在 PHP、SQL 和 JSON 响应情况下实现预加载器 .gif

Question

任何人都可以建议在以下设置中实现预加载器 .gif 的好方法：

在我的第一页上，我有一个相当长的表格，其中有几个复选框。用户完成表单并单击提交后，值将存储在数据库中。然后我重定向到另一个文件，该文件包含相当复杂的一堆 SQL 语句，这些语句将用户的答案与我数据库中的几个表进行比较，并生成一个值列表，然后我将这些值放入一个数组中。然后将该数组传递给包含几个 API 调用的函数。整个过程可能会花费您想象的相当多的时间，所以我真的很想以动画预加载器的形式向用户提供一些反馈。网上有很多关于预加载器的信息，但我不太确定应该如何或在哪里做。

只是为了提供更多细节，我有太多代码无法尝试 post，但确切的布局如下。

HTML 带复选框的表单，SQL 插入语句。插入数据后，我使用 header('Location: x.php') 重定向到：
...包含一系列 SQL 语句的文件，这些语句生成一个数组，其中包含来自数据库的一堆值。我将该值数组发送到：
...另一个文件中的函数调用至少两个 APIs (Yelp) 并循环打印结果。

任何帮助都会很棒 - 我是否以最好的方式完成整个过程？

谢谢

Answer 1

您不必更改服务器端的任何内容（.php 文件）。要实现这一点，您需要做的就是在客户端实现 AJAX 和 JavaScript，即。 HTML/JS.

下面是执行此操作的示例。

HTML

<!DOCTYPE html>
<html>
<head>
<style>
    .hide { display: none; }
</style>
</head>
<body>
<form>
    <input type="submit">
</form>
<div class="loading hide"><svg width='120px' height='120px' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="uil-default"><rect x="0" y="0" width="100" height="100" fill="none" class="bk"></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(0 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(30 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.08333333333333333s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(60 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.16666666666666666s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(90 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.25s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(120 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.3333333333333333s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(150 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.4166666666666667s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(180 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.5s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(210 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.5833333333333334s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(240 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.6666666666666666s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(270 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.75s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(300 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.8333333333333334s' repeatCount='indefinite'/></rect><rect  x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#00b2ff' transform='rotate(330 50 50) translate(0 -30)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.9166666666666666s' repeatCount='indefinite'/></rect></svg></div>
<div id="result"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
(function($, window, document) {
    $("form").on("submit", function(e) {
        e.preventDefault();
        $("input[type=submit]").prop("disabled", true);
        $(".loading").removeClass("hide");
        $.get("submit.php", function(e) {
            $(".loading").addClass("hide");
            $("#result").html(e);
        });
    });
})(jQuery, window, document);
</script>
</body>
</html>

PHP

submit.php

<?php

sleep(5);

header('Location: x.php');

x.php

<?php

sleep(3);

$arr = [];
for ($i=0; $i<1000; $i++) {
    $arr[] = [
        rand()
    ];
}

echo "<pre>";
var_dump($arr);
echo "</pre>";

如何在 PHP、SQL 和 JSON 响应情况下实现预加载器 .gif

How to implement a preloader .gif in PHP, SQL and JSON response situation

php

json

mysqli

preloader

HTML

PHP

submit.php

x.php