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

时间：2022-09-02 11:07:29

Can anybody suggest a good way to implement a preloader .gif in the following set up:

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

On my first page I have a rather long form with several checkboxes. After the user completes the form and clicks submit the values are stored in a database. I then redirect to another file that has a fairly complicated bunch of SQL statements that comparers the users answers against several tables in my database and churns out a list of values that I then put into an array. This array is then then passed into a function containing a few API calls. This whole process can take quite a bit of time as you can imagine so I'd really like to give some feedback to the user in the form of an animated preloader. There's a lot of info online with regards to preloaders but I'm not really sure how or where I should do it.

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

Just to give some more detail, I have far too much code to try to post here but the exact layout is as follows.

只是为了提供更多细节，我有太多的代码试图在这里发布，但确切的布局如下。

  1. HTML form with checkboxes, SQL insert statement. Once the data has been inserted I use header('Location: x.php') to redirect to:

    带有复选框的HTML表单，SQL插入语句。插入数据后，我使用标题（'Location：x.php'）重定向到：

  2. ...the file with a series of SQL statements which generates an array with a bunch of values from the database. I send that array of values into:

    ...带有一系列SQL语句的文件，这些语句生成一个包含数据库中一堆值的数组。我将该值数组发送到：

  3. ...a function in another file that calls at least two APIs (Yelp) and prints the results in a loop.

    ...另一个调用至少两个API（Yelp）并在循环中打印结果的文件中的函数。

Any help at all would be great - am I even going about this whole process in the best way?

任何帮助都会很棒 - 我是否以最佳方式进行整个过程？

Thanks

谢谢

1 个解决方案

#1

0  

You should not have to change anything on the server side (.php files). All you need to do to achieve this is implementing AJAX with JavaScript on the client side ie. HTML/JS.

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

Below is an example to doing this.

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

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>";

#1

0  

You should not have to change anything on the server side (.php files). All you need to do to achieve this is implementing AJAX with JavaScript on the client side ie. HTML/JS.

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

Below is an example to doing this.

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

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>";
标签：

相关文章