如何在javascript,jquery和php中添加加载,同时执行


How to add loading in javascript,jquery and php while it execute?

我试图做一个东西,当点击将返回值在它的页面。下面是我的表单,现在当表单提交它需要一些时间,我想要的是它会显示加载时间,而代码得到执行

我的形式
<html>
<head>
</head>
<body>
<form id="myForm" action="redirect.php" method="post">
Name: <input type="text" name="name" /><br />
Age : <input type="text" name="pass" /><br />
<button id="sub">submit</button>
</form>
<span id="result"></span>
<script src="script/jquery-1.8.1.min.js" type="text/javascript"></script>
<script src="script/script.js" type="text/javascript"></script>
</body>
</html>

my script.js file

         $("#sub").click( function() {
         $.post( $("#myForm").attr("action"),
          $("#myForm :input").serializeArray(),
         function(info){ $("#result").html(info);
            });
          });
        $("#myForm").submit( function() {
        return false;
         });

我的redirect.php文件

     <?php
     $name = $_POST['name'];
     $age = $_POST['pass'];
     if($name==!NULL || $age==!NULL)
     echo "Successfully returned";
     echo $name;
     else
     echo "Returned Failed";
     ?>

您可以在redirect.php的循环中给出像echo "15% done"这样的进度消息。

假设当前你的代码是:

<?php
$N = 100000; // this is how many iterations you will make in your work
for ($i = 0; $i < $N; $i++) // This is the loop that does the work in your script
{
    do some part of your work...
}
?>

要显示消息,您需要在PHP中这样做:

<?php
ob_start (); 
$percent_previous = 0;
$N = 100000; // this is how many iterations you will make in your work
for ($i = 0; $i < $N; $i++) // This is the loop that does the work in your script
{
    do some part of your work...
    $percent = $N / ($i + 1) * 100;
    if ($percent_previous != $percent) // not to show it too frequently
    {
        message ("$percent% done...");
        $percent_previous = $percent;
    }
}
// after the work done:
if ($percent_previous != 100)
    progress (100);
function message ($msg)
{
    echo "<!-- some 4 KB of random garbage like jhajdhsjahsjaheuwbcwuvacjacv -->";
    echo $msg;
    ob_end_flush ();
    ob_flush     ();
    flush        ();
    ob_start     (); 
    echo "<!-- some 1 KB of random garbage like hdsjfagdfqhwjcwwvyvcsdhalj -->";
}
?>

I echo前后消息的长注释与垃圾<!-- hdjhsjsjdshjd ->(约4千字节)重置网络和浏览器的缓存机制。我使用垃圾是因为如果我只使用大约4 KB的空间,它可以被压缩,并且最终传输的消息将不够大。

你可以从<span class=someclass>开始,然后在100%后关闭这个标签;然后执行一个javascript来擦除进度消息。

当然,图像也可以这样做,你可以很好地格式化你的进度消息。

如果您只希望在计算完成后显示gif并消失,那么您可以按照以下行进行:

<html>
<body>
<?php
ob_start (); 
progress ("<span id='progress'><img src='progress.gif'></span>");
// You still need the trick I described above for this to be shown in real time
// do all your long work here
?>
<script>
    document.getElementById ("progress").innerHTML = ''; // This erases the image
</script>
</body>
</html>

使用OP示例代码的完整示例如下:

<html>
<body>
<?php
ob_start (); 
message ("<span id='progress'><img src='progress.gif'></span>");
// You still need the trick I described above for this to be shown in real time
 $name = $_POST['name'];           // OP's code
 $age = $_POST['pass'];            // OP's code
 if($name==!NULL || $age==!NULL)   // OP's code
 echo "Successfully returned";     // OP's code
 echo $name;                       // OP's code
 else                              // OP's code
 echo "Returned Failed";           // OP's code
function message ($msg)
{
    echo "<!-- some 4 KB of random garbage like jhajdhsjahsjaheuwbcwuvacjacv -->"; // please include here at least some 4 kilobytes of such random garbage, I will not type it here
    echo $msg;
    ob_end_flush ();
    ob_flush     ();
    flush        ();
    ob_start     (); 
    echo "<!-- some 1 KB of random garbage like hdsjfagdfqhwjcwwvyvcsdhalj -->"; // please include here at least some 1 kilobyte of such random garbage, I will not type it here
}
?>
<script>
    document.getElementById ("progress").innerHTML = ''; // This erases the image
</script>
</body>
</html>