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

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

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.

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

HTML form with checkboxes, SQL insert statement. Once the data has been inserted I use header('Location: x.php') to redirect to:
...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:
...a function in another file that calls at least two APIs (Yelp) and prints the results in a loop.

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

Thanks

写回答
好问题 0 提建议
追加酬金
关注问题
分享
邀请回答
编辑收藏删除结题
收藏举报

1条回答默认最新

dphj737575 2016-11-28 02:42

关注

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.

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

本回答被题主选为最佳回答 , 对您是否有帮助呢?

报告相同问题？

关注问题

php读取sqlserver数据并转化为json格式的问题 json php sql
2017-08-08 09:02

回答 2 已采纳 ![图片说明](https://img-ask.csdn.net/upload/201708/10/1502360431_821100.png) 又看了手册，sqlsrv_fetch_array(
如何在php上对Json_encode进行排序？ json php sql
2015-03-19 15:13

回答 1 已采纳 You need to sort, order, group or whatever you like them in either the sql query or through array
mysql关联表查询如何返回像json格式的数据呢? json mysql node.js sql
2019-05-06 14:36

回答 2 已采纳你这个用mysql是实现不了的。就算能实现，也是硬拼字符串，效率很低的。我建议你百度一下hive的avro文件格式，和你这个类似，但是mysql数据库是实现不了的，hive可以实现，但是需要写UD
ThinkPHP8完全教程（附案例源码和sql脚本）
2024-07-12 15:57

学亮编程手记的博客 phpEnv：官方网站：https://www.phpenv.cn/ （专业优雅强大的PHP集成环境）；下载最新版本，自动安装后（默认C盘，可选），界面如下：简单配置：应用软件->设置->开启CDN加速（方便我们后续安装各种软件）；安装 ...
sql查询最大值和最小值之差的方法。 php sql
2020-07-01 11:15

回答 3 已采纳 select level,MAX(score)-MIN(score) from t_score GROUP BY level
Json对象从PHP返回json_encode（），但在我的javascript中无效的json对象 javascript jquery json php
2015-05-07 08:47

回答 4 已采纳 Your PHP starts like this: <html> <body> Whatever else it outputs after that, it is
Exception in thread "main" java.sql.SQLException: No suitable driver found for jdbc jar java sql 有问必答
2022-04-02 20:43

回答 3 已采纳没有合适的驱动，驱动包没有导入或者版本不对。
14万字面试题汇总整理，祝你顺利斩获大厂前端offer
2021-07-17 09:08

麦田上的字节的博客严格模式和混杂模式的区分，以及如何触发这2种模式? <!DOCTYPE>声明位于文档中的最前面，处于<html>标签之前。告知浏览器的解析器，用什么文档类型规范来解析这个文档。 DOCTYPE不存在或格式不正确会...
PHP - 如何将两个不同的JSON输出合并为一个 json php
2016-01-26 10:22

回答 1 已采纳 not very complicated ! :) $merged_array = array(); $merged_array[] = $data; $merged_array[]
SQL Server连接数据库报错08001 php sql 数据库有问必答
2021-12-24 08:51

回答 2 已采纳 Check if instance name is correct and if SQL Server is configured to allow remote connections.检查实例名
mysql5.7 使用json_extract 没有数据，是什么情况？ mysql
2022-04-22 13:39

回答 1 已采纳因为你这个json是个列表（以"["开头，以"]"结尾），所以你定位的路径不对，要先取这个列表中的第一个元素，然后再往下找imageUrl。 select JSON_EXTRACT(title_ima
2024年前端最新笔试题附答案
2024-08-25 13:39

沐爸muba的博客今天给同学们分享下前端的常见笔试题，通过这些笔试题可以检验个人知识的掌握情况，也可以提高面试时笔试题的通过率，一起看看吧！
求这段php输出json 格式 json mysql php
2015-08-23 08:14

回答 3 已采纳 php 正确的输出json格式----------------------biu~biu~biu~~~在下问答机器人小D，这是我依靠自己的聪明才智给出的答案，如果不正确，你来咬我啊！
前端开发技术栈（插件篇）：400+常用前端开发插件总结清单（持续更新......）
2023-01-04 00:59

SteveRocket的博客常用前端开发插件总结清单，日常前端开发的时候，尤其在使用一些常用的功能的时候，例如：表单，，动画效果，时间选择，文件上传，下拉框等功能。直接用插件可以让自己节省更多的开发时间，更多的去关心业务，自己...
全面掌握UEditor富文本编辑器.zip
2024-11-06 16:54

Fkvision的博客该编辑器支持JavaScript和PHP语言，使得开发者能够轻松集成到网站或应用程序中。本文档详细介绍了UEditor的集成、特性、安装配置以及安全和性能优化等关键点。 1. UEditor概述和集成 UEdito...
没有解决我的问题, 去提问

悬赏问题

¥50 寻找一位有逆向游戏盾sdk 应用程序经验的技术
¥15 请问有用MZmine处理 “Waters SYNAPT G2-Si QTOF质谱仪在MSE模式下采集的非靶向数据” 的分析教程吗
¥50 opencv4nodejs 如何安装
¥15 adb push异常 adb: error: 1409-byte write failed: Invalid argument
¥15 nginx反向代理获取ip，java获取真实ip
¥15 eda：门禁系统设计
¥50 如何使用js去调用vscode-js-debugger的方法去调试网页
¥15 376.1电表主站通信协议下发指令全被否认问题
¥15 物体双站RCS和其组成阵列后的双站RCS关系验证
¥15 复杂网络，变滞后传递熵，FDA

码龄粉丝数原力等级 --

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

1条回答默认最新

码龄粉丝数原力等级 --

HTML

PHP

submit.php

x.php

悬赏问题

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

1条回答 默认 最新

HTML

PHP

submit.php

x.php

悬赏问题

1条回答默认最新