在 PHP 执行时加载页面答案

【问题标题】：Load page while PHP is executing在 PHP 执行时加载页面
【发布时间】：2013-06-28 22:22:33
【问题描述】：

我想做什么：显示加载 gif 或文本...至少在执行 php 之前和期间显示黑屏。

我尝试过的。

我已经使用 flush() 进行了测试，直到整个 php 进程完成之前我什么都没有得到。我也不是特别喜欢这个概念，但我会接受任何东西。

我正在考虑使用两个页面来完成此任务，尽管当前项目已接近完成，并且需要一些时间来整合分散的 html/php 代码。

目前我正在做 3-simpleXML_load_file()、1-include()、1-file_get_contents() 我有 javascript 函数绘制来自 simpleXML_Load_file() 之一的数据...

我愿意将部分代码移动到不同的文件中，但这是一项艰巨的任务。所以我想对如何进行一些建议或建议。

如果我需要详细说明，请询问！

谢谢， JT

 <html>
 <head>
 <?php
$lat = $_POST['Lat'];
$long = $_POST['Lon'];
 $weather_hourly = simplexml_load_file('http:....lat='.$lat.'&lon='.$long.'');
 ?>
 <script type="text/javascript">

 <!--Plot function-->
 $(function() 
 {
 var d = 
 [
<?php
//Pulling in hourly data to plot temp vs time
$i=0;
$array=array();
while ($i<=100)
{
    echo '['. (strtotime($weather_hourly->data->{'time-layout'}->{'start-valid-time'}[$i])*1000) .','.$weather_hourly->data->parameters->temperature->value[$i] .'],';
    $value = $weather_hourly->data->parameters->temperature->value[$i];
    array_push($array,$value);
    $i++;
}
    foreach ($array as $key => $value) 
    { 
                    $value = (string) $value;
                    $min_sec_array[] = $value;
    }
?>

</script>
 </head>
 <body>
 <div id=graph>
 </div>
 </body

【问题讨论】：

我添加了一个非常不工作但你得到想法的代码示例

标签： php javascript html ajax

【解决方案1】：

实现此目的的主要方法是使用 AJAX 和多个页面。要做到这一点，第一页不应该做任何处理，只是把加载图像放在这里。接下来，发出 AJAX 请求，请求完成后，您可以在页面上显示结果或重定向到其他页面。

例子：

文件 1（还必须包含 jQuery），将其与加载器动画一起放入正文中：

<script language="javascript" type="text/javascript">
$(function(){
    var mydata = {};
    $.post('/myajaxfile.php', mydata, function(resp){
        // process response here or redirect page
    }, 'json');
});
</script>

更新：这是基于您的代码的更完整示例。这尚未经过测试，需要包含 jQuery 库，但这应该给你一个好主意：

文件 1：file1.html

</head>
 <body>
 <?php
$lat = $_POST['Lat'];
$long = $_POST['Lon'];
 ?>
 <!-- Include jQuery here! Also have the loading animation here. -->
 <script type="text/javascript">
$(function(){

    $.get('/file2.php?Lat=<?php echo $lat; ?>&Lon=<?php echo $long; ?>', null, function(resp){
        // resp will have the data from file2.php
        console.log(resp);
        console.log(resp['min_sec_array']);
        console.log(resp['main']);

        // here is where you will setup the graph 
        // with the data loaded
        <!--Plot function-->
    }, 'json');

});

</script>


 <div id=graph>
 </div>
 </body
 </html>

文件2：file2.php 我不确定您是否需要 $min_sec_array，但我让这个示例返回了它以及您之前使用的主要数据。

$lat = $_POST['Lat'];
$long = $_POST['Lon'];
$weather_hourly = simplexml_load_file('http:....lat='.$lat.'&lon='.$long.'');

//Pulling in hourly data to plot temp vs time
$i=0;
$main = array();
$array=array();
while ($i<=100)
{
    $main[] = array((strtotime($weather_hourly->data->{'time-layout'}->{'start-valid-time'}[$i])*1000), $weather_hourly->data->parameters->temperature->value[$i]);
    $value = $weather_hourly->data->parameters->temperature->value[$i];
    array_push($array,$value);
    $i++;
}
foreach ($array as $key => $value) 
{
    $min_sec_array[] = (string) $value;
}


echo json_encode(array(
    'min_sec_array' =>$min_sec_array,
    'main' => $main
));

exit();

?>

【讨论】：

介意向我展示一个简单的示例，说明我将如何加载 php 文件的数据
所以这会将文件 1 与文件 2 html 附加到哪里？
@tman 恐怕我不明白你想用这两个脚本做什么。您能否发布实际代码，以便我们了解您要执行的操作？
我很高兴看到你对思考问题的回应！

【解决方案2】：

如果您希望它在加载后修改页面，我建议不要使用纯 html 和 php 执行此操作。因为php是服务器端处理，所以在页面发送给用户之前执行。你需要Javascript。使用 Javascript 将使您能够在页面发送给用户之后动态地在 DOM 树中添加或删除 html 元素。它由用户浏览器执行。

为了更容易上手，我推荐 jQuery，因为有很多关于此类主题的教程。

JQuery

JQuery learning center

一个小例子：

HTML

<head>
    <meta charset="utf-8" />
    <title> </title>
    <script type="text/javascript" src="js/lib/jquery-1.9.1.js"></script>
</head>
<body>
    <h1>Addition</h1>
    <div id="error_msg"> </div>
    <div id="content">
        <!-- show loading image when opening the page -->
        <img src="images/loading.gif"/>
    </div>
    <script type="text/javascript">
       // your script to load content from php goes here
    </script>
</body>

到现在为止，这只不过是以下内容：

添加以下php文件

<?php

$num1 = $_GET['num1'];
$num2 = $_GET['num2'];

$result = $num1 + $num2;

echo '<p>Calculating '.$num1.' + '.$num2.' took a lot of time, but finally we were able to evaluate it to '.$result.'.</p>'
     .'<p> '.$num1.' + '.$num2.' = '.$result.'</p>';

 ?>

不会改变 html 的任何内容，但在 HTML 中添加 javascript/Jquery 将是静态 html 和服务器端 php 之间的一种连接。

$(document).ready(function(){
    $.ajax({        // call php script
        url: 'php/script.php?num1=258&num2=121',
        type:'GET',
        timeout: 500,
        contentType: 'html'
    }).success(function(data){
            // remove loading image and add content received from php 
        $('div#content').html(data);

    }).error(function(jqXHR, textStatus, errorThrown){
            // in case something went wrong, show error
        $('div#error_msg').append('Sorry, something went wrong: ' + textStatus + ' (' + errorThrown + ')');
    });
});

这将更改您的页面以显示加载动画，直到 php 脚本返回其数据，例如：

因此您可以在纯 html 中设置整个页面，添加一些加载 gif，调用多个 php 脚本并更改内容，而无需重新加载页面本身。

【讨论】：

介意向我展示一个简单的示例，说明我将如何加载 php 文件的数据
我加了一个小例子，希望对你有帮助。

【解决方案3】：

这对你的问题来说是一种令人讨厌的解决方案...... 但这可以工作：你和那些人一起工作 -

ob_start();
//printing done here...
ob_end_flush();

一开始你将创建你的旋转 ajax gif... 然后你做所有你想要的处理和计算...... 在处理结束时，只需回显一个隐藏您的 gif 的小脚本...

取决于具体需要，也许 ajax 可以是更优雅的解决方案。

【讨论】：

虽然我想再试一次，但我还没有运气好去上班！
我的 PHP 中的第一行当前是 ob_start(); echo '<img src="pics/loading.gif">'; ob_end_flush();

【解决方案4】：

针对您在下面与 David Constantine 的对话，您是否尝试过使用 ob_flush()？

ob_start(); 
echo '<img src="pics/loading.gif">'; 
ob_flush();

// Do your processing here

ob_end_flush();

【讨论】：

似乎还是完成了整个php的执行

【解决方案5】：

我认为将 PHP 输出刷新到浏览器没有问题，但更有可能让浏览器开始呈现部分 html 输出。不幸的是，部分 html 上的浏览器行为是特定于浏览器的，因此，如果您希望某些东西在任何浏览器中都能正常工作，那么其他答案中建议的 AJAX 解决方案是更好的选择。

但是，如果您不喜欢完整的 AJAX 解决方案所增加的复杂性，您可以尝试让您的 html 输出“很好”，即提供一些可以格式化的正文输出，而无需其余的 html 输出.这是您的示例代码失败：它花费大部分时间将数据输出到 html 标头内的脚本标记中。在您的 PHP 代码实际上完成执行之前，浏览器甚至不会看到正文的开头。如果您首先编写完整的正文，然后在其中添加数据的脚本标记，则可以在等待最终脚本完成时为浏览器提供至少尝试呈现的内容。

我发现了这里讨论的相同问题（尽管不是在 PHP 中）：Stack Overflow question "When do browsers start to render partially transmitted HTML?" 特别是，那里接受的答案提供了一个相当少的非 AJAX 示例来显示和隐藏占位符，而 html 文件没有尚未完全加载。

【讨论】：

【解决方案6】：

我知道这是一个老问题，但是 rpnew 在page 中提供的答案非常清楚，并且很容易根据您的项目要求进行调整。它是 AJAX 和 PHP 的结合体。

调用PHP脚本的HTML页面PHPAjax.html：

<html>
<head>    
    <script type="text/javascript">
        document.write('<div id="loading">Loading...</div>');

        //Ajax Function
        function getHTTPObject()
        {
            var xmlhttp;
            if (window.ActiveXObject)
            {
                try
                {
                    xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
                }
                catch (e)
                {
                    try
                    {
                        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                    }
                    catch (E)
                    {
                        xmlhttp = false;
                    }
                }
            }
            else
            {
                xmlhttp = false;
            }
            if (window.XMLHttpRequest)
            {
                try
                {
                    xmlhttp = new XMLHttpRequest();
                }
                catch (e)
                {
                    xmlhttp = false;
                }
            }
            return xmlhttp;
        }
        //HTTP Objects..
        var http = getHTTPObject();

        //Function which we are calling...
        function AjaxFunction()
        {
            url='PHPScript.php';
            http.open("GET",url, true);
            http.onreadystatechange = function()
            {
                if (http.readyState == 4)
                {
                    //Change the text when result comes.....
                    document.getElementById("content").innerHTML="http. responseText";
                }
            }
            http.send(null);
        }
    </script>
</head>
<body onload="AjaxFunction()">
</body>
</html>

后台 PHP 脚本PHPScript.php:

<?php
    sleep(10);
    echo "I'm from PHP Script";
?>

将两个文件保存在同一目录中。从您的浏览器中打开 HTML 文件。它将显示 'Loading...' 10 秒，然后您将看到消息更改为“我来自 PHP 脚本”。

【讨论】：