HTML加载页面，而php处理来自表单的信息答案

【问题标题】：HTML Loading page while php processes information from a formHTML加载页面，而php处理来自表单的信息
【发布时间】：2017-07-30 15:04:40
【问题描述】：

我想知道是否有人可以帮助我解决我遇到的这个问题。我想创建一个在 PHP 文件运行脚本时向用户显示的加载页面。下面是我写的文件和我想要做什么的解释。

1) Index.html：这是用户看到的初始页面。他们将输入他们的名字和姓氏，然后点击提交按钮。一旦他们点击提交按钮，一个 PHP 脚本就会运行。

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <div>
            <form action="saveFile.php?saving=1" id="contact_form" method="post">
                First Name:
                <input type="text" name="fname" id="fname" value="First Name" onblur="if(this.value == '') { this.value = 'First Name'; }" onfocus="if(this.value == 'First Name') { this.value = ''; }" />
                <br>
                Last Name:
                <input type="text" name="lname" id="lname" value="Last Name" onblur="if(this.value == '') { this.value = 'Last Name'; }" onfocus="if(this.value == 'Last Name') { this.value = ''; }" />
                <br>
                <br>
                <input value="Submit" type="submit" />
            </form>
        </div>
    </body>
</html>

2) saveFile.php：这个 PHP 文件会将用户输入保存到一个文本文件中，然后运行一个 bash 脚本，该脚本获取该文本文件并对其进行一些随机操作。脚本完成后，它将返回一个 html 文件，它将自动重定向到该文件。

现在我遇到了问题：我放了这个 GIF，它会让人们知道脚本正在运行，并且很快就会出现下一页。当我尝试这个时，第二页没有显示，它直接进入第三页。脚本和一切都运行良好，并且没有任何问题。实际发生的情况是，当用户点击提交按钮时，它显示页面正在加载某些内容，并且在准备好后会跳转到第三页。 GIF 根本不显示，页面只是从 index.html 跳转到第 3 页。我试图将文件设为 .html 或 .php，但它给了我相同的结果。如果有人能给我一些关于如何让它工作的提示，我将不胜感激。

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>

    <img src="loading.gif">

    <?php
        $fname = $_POST["fname"];
        $lname = $_POST["lname"];

        $text = $fname . PHP_EOL . $lname; 

        $file = "Contact.txt";
        $fp = fopen($file, "a") or die("Couldn't open $file for writing!");
        fwrite($fp, $text) or die("Couldn't write values to file!");
        fclose($file);

        $output = shell_exec("bash Script.sh");

        header("location:$output");
   ?>

    </body>
</html>

3) $output：这是用户获得一些随机信息的最后一页。

<!DOCTYPE html>
<html>
    <head>
    </head>

    <body>

        <div>
        <p> Random information </p>
        <a href="index.html" class=home> Click here to go back </a>
        </div>
    </body>
</html>

【问题讨论】：

我猜你的 php 脚本运行得很快，所以你没有显示 gif 图片
你可以使用
您可能希望将 Ajax 与 formdata (stackoverflow.com/questions/32421527/…) 一起使用。

标签： javascript php html loading

【解决方案1】：

您在 saveFile.php 中重定向用户，因此它不会显示 GIF 图像。

1.首先，为提交按钮分配一个ID：

<input value="Submit" type="submit" id="submitForm"/>

2.将<image src="loading.gif" />移动到index.html页面，为其分配一个ID并将其Display设置为none 使用 CSS，所以 loading.gif 默认会被隐藏。

<img src="loading.gif" id="loader" style="display: none"/>

3. 从 saveFile.php 中删除 header("location:$output");。

4.添加以下jQuery：

$(document).ready(function(){
    $("#submiForm").click(function(){
        $("#loader").show();   //show loading.gif
        setTimeout(function(){
            window.location = "your page name where you want to redirect";
        });
    }, 5000); //Redirect after 5 seconds..
});

注意：不要为此目的使用 PHP sleep 函数。

【讨论】：

这对您有帮助吗？