单击“提交表单”后如何显示加载动画?

时间:2013-12-27 07:40:04

标签: javascript php forms onclick loading

我使用php生成报告的执行时间有问题。为了使用户能够知道该脚本仍在运行,我想在点击提交表单后添加简单的loading.gif。 这是我的脚本的方案:

form.html

<form id="form1" method="post" action="do.php" target="_new">
    <input type="text" name="param1">
    <input type="text" name="param2">
    <input type="submit" value="Submit">
</form>

因此,基本上用户首先输入参数以生成他们想要的报告。然后他们的参数将被发送到php脚本[do.php]以进行下一个过程(生成报告)。 这是[do.php]的PHP脚本:

do.php

<html>
    <head>
        <style>
            #loadingdiv {
                width: 100%;
                height: 100%;
                background:url(load50.gif) no-repeat center center #FFF;
                position: fixed;
            }
        </style>";
        <script type='text/javascript'>
            function swapdiv() { 
                if (document.getElementById) { // DOM3 = IE5, NS6 
                    document.getElementById('loadingdiv').style.display = 'none'; 
                }else { 
                    if (document.layers) { // Netscape 4 
                        document.loadingdiv.display = 'none'; 
                    }else { // IE 4 
                        document.all.loadingdiv.style.display = 'none'; 
                    } 
                } 
                if (document.getElementById) { // DOM3 = IE5, NS6 
                    document.getElementById('resultdiv').style.display = 'block'; 
                } else { 
                    if (document.layers) { // Netscape 4 
                        document.resultdiv.display = 'block'; 
                    } else { // IE 4 
                        document.all.resultdiv.style.display = 'block'; 
                    } 
                } 
                window.onunload = null;
                return;
            } 
        </script>";
    </head>
    <body>
        <div id='loadingdiv' align='center'></div>
        <div id='resultdiv' style='display:none;'>
            <?php
            include "search_process.php";
            ?>
        </div>
        <script type='text/javascript'>
            //this is called after page loaded
            window.onload=swapdiv;
        </script>
    </body>
</html>

我在do.php执行时添加了脚本来显示loading.gif动画。但是,只有当浏览器中的php脚本执行状态正在传输数据时才会出现loading.gif ...当状态等待响应时... loading.gif不会出现。

我想要的是当用户点击提交表单然后loading.gif出现甚至do.php状态仍在等待响应。我很高兴听到你们所有人的任何解决方案:)

感谢。

0 个答案:

没有答案