Как реализовать preloader .gif в PHP, SQL и JSON ответной ситуации

Кто-нибудь может предложить хороший способ реализации preloader .gif в следующей конфигурации:

На моей первой странице у меня довольно длинная форма с несколькими флажками. После того, как пользователь заполняет форму и нажимает кнопку «Отправить», значения сохраняются в базе данных. Затем я перенаправляю в другой файл, который содержит довольно сложную группу операторов SQL, которая сравнивает ответы пользователей с несколькими таблицами в моей базе данных и составляет список значений, которые я затем помещаю в массив. Затем этот массив передается в функцию, содержащую несколько вызовов API. Весь этот процесс может занять довольно много времени, как вы можете себе представить, поэтому я действительно хотел бы дать некоторую обратную связь пользователю в виде анимированного предзагрузчика. В Интернете много информации о предварительных загрузчиках, но я не совсем уверен, как и где я должен это делать.

Просто, чтобы дать более подробную информацию, у меня слишком много кода, чтобы попытаться опубликовать здесь, но точная схема выглядит следующим образом.

  1. HTML-форма с флажками, оператор вставки SQL. После того, как данные были вставлены, я использую заголовок (‘Location: x.php’) для перенаправления на:

  2. …файл с серией операторов SQL, который генерирует массив с кучей значений из базы данных. Я отправляю этот массив значений в:

  3. …функция в другом файле, которая вызывает как минимум два API (Yelp) и печатает результаты в цикле.

Любая помощь вообще была бы великолепна — я даже иду весь этот процесс наилучшим образом?

Спасибо

0

Решение

Вам не нужно ничего менять на стороне сервера (файлы .php). Все, что вам нужно сделать, чтобы добиться этого, это реализовать AJAX с JavaScript на стороне клиента, т.е. HTML / JS.

Ниже приведен пример для этого.

<!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>

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

Другие решения

Других решений пока нет …

По вопросам рекламы [email protected]