如何在不使其成为 2 页的情况下向该脚本添加加载 gif

Question

我有一个简单的 php 脚本，最多可能需要 15 秒才能完成。我想添加一个正在加载的 gif，我更愿意将其全部放在一页上

我是个菜鸟，我有一个 php 脚本，它根据传递给脚本的值执行多项任务。例如，在某个表单提交上，传递了一个值为 'getSegments' 的隐藏值 "task"，这里是 getSegments 任务 php 中的一些

if ($task == 'getSegments') {

include('include/pre.content.php');

$response = [];
exec('/usr/bin/phantomjs phantomjstest.js', $response);

$data = $response[19];

// code that parses $data and builds $output

echo $output;

include('include/post.content.php');

}

从用户提交表单到返回并解析 $response 最多可能需要 15 秒。 easiest/best添加一个"loading.gif"在这段时间显示的方法是什么？

我希望将所有内容都保留在这个 php 脚本中，除了我可以将代码添加到我的 css 文件以及 pre.content.php，其中包含打开标签直至并包括结束标签，以及包含我的页脚、版权的 post.content.php，以及结束标签 body 和 html。

提前致谢。

2019 年 1 月 22 日更新

根据 Eriks 的建议，我创建了以下 phantomtest.php 文件进行测试：

<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8"/>
<meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" name="viewport">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

</head>
<body>

<img src="images/loading3.gif" id="loading-gif">

<script>
$('#loading-gif').hide();
// $('#task_start_butt').click(function()
$(document).ready(function()
{
    $('#loading-gif').show();
    $.ajax({url:”pathTo getSegments.php"}).done(function(data){
        $('#loading-gif').hide();
        // display the result here
        doSomethingOnComplete(data);
    });
});
</script>

<?php

function doSomethingOnComplete($response)
{
// do here your work
$data = $response[19];
echo "Data = $data";
}

?>

</body>
</html>

和getSegments.php

<?php

$response = [];
exec('/usr/bin/phantomjs phantomjstest.js', $response);
$data = $response[19];
echo $data;

?>

我改了 Eriks 的线

$('#task_start_butt').click(function()

至

 $(document).ready(function()

因为我希望脚本在页面加载时启动，当用户来自表单时。我认为脚本运行正常，因为每次 phantomtest.php 运行时 loading3.gif 在预期范围内显示不同的时间量，然后它被隐藏当 ajax 调用的 getSegments.php 完成时（我认为）。但是，我无法显示 getSegments.php.

的输出

如果有人对如何完成此任务有任何建议，我将不胜感激。谢谢。

我进一步更新并移动

function doSomethingOnComplete($response)

从 php 部分中取出并放入脚本部分。我现在可以用

输出数字 11

document.write(5 + 6);

所以现在我需要的是如何将 getSegments.php 的结果转换为 phantomtest.php。

Answer 1

可以用ajax调用任务，用JS来show/hide加载动画。

HTML/JS（假设jQuery）：

<a href="#" id="task_start_butt">Start the task</a>
<img src="loading.gif" id="loading-gif">
<script>
    $('#loading-gif').hide();
    $('#task_start_butt').click(function()
    {
       $('#loading-gif').show();
       $.ajax({url:"url to your php script"}).done(function(data){
          $('#loading-gif').hide();
          // display the result here
       });
    });
</script>

您还需要将 php 修改为 return 您想要显示的数据。

Answer 2

有效！！！

php:

$response = [];
exec('/usr/bin/phantomjs phantomjstest.js', $response);
echo json_encode($response[19]);

JS：

<img src="images/loading3.gif" id="loading-gif">

<script>
$('#loading-gif').hide();
//    $('#task_start_butt').click(function()
$(document).ready(function () {
    $('#loading-gif').show();
    $.ajax({url: "https://aajumpseat.com/dev/getSegments.php"}).done(function (data) {
        $('#loading-gif').hide();


// display the result here

        output = JSON.parse(data);
        document.write(output);

    });
});

如何在不使其成为 2 页的情况下向该脚本添加加载 gif

How can I add a loading gif to this script without making it 2 pages

php

loading