如何在PHP，SQL和JSON响应情况下实现preloader .gif
[英]How to implement a preloader .gif in PHP, SQL and JSON response situation
问题描述
任何人都可以在以下设置中建议一种实现preloader .gif的好方法：
在我的第一页上，我有一个相当长的表格，其中包含多个复选框。 用户填写表单并单击提交后，值将存储在数据库中。 然后，我重定向到另一个具有相当复杂的SQL语句的文件，该文件将用户的回答与数据库中的多个表进行比较，并列出一系列值，然后将它们放入数组中。 然后将此数组传递到包含一些API调用的函数中。 整个过程可能需要花费很多时间，所以我真的很想以动画预加载器的形式向用户提供一些反馈。 在线上有很多有关预加载器的信息，但我不确定如何或在何处进行。
为了提供更多细节，我有太多代码无法尝试在此处发布，但是确切的布局如下。
带复选框的HTML表单，SQL插入语句。 插入数据后，我使用header（'Location：x.php'）重定向到：
...带有一系列SQL语句的文件，该语句从数据库中生成带有一堆值的数组。 我将该值数组发送到：
...另一个文件中的函数，它至少调用两个API（Yelp）并在循环中打印结果。
根本没有任何帮助-我什至会以最佳方式进行整个过程吗？
谢谢
1 个解决方案
解决方案1
0 已采纳 2016-11-28 02:42:02
您无需在服务器端进行任何更改（.php文件）。 您需要做的就是在客户端即JavaScript上实现AJAX。 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>";
如何实现ajax，该ajax调用实现httpget方法的php函数，并将响应作为json返回给ajax
[英]How to implement ajax which calls php function which implements httpget method and returns a response as json to ajax
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.