如何在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>
相关文章:
- 在iframe中加载url并添加一个类
- JS触发器值检查在文档加载后添加到页面的元素在加载时更改AND
- 向使用jQuery加载DOM后添加的字段添加不受限制的文本输入DatePickers
- Angular:在页面加载后添加类
- 当CDN加载失败时,为字体添加一个本地CSS回退
- HTML图像未加载(自动添加内联css和属性)
- 清理在加载 Ajax 内容时添加的 CSS
- 为 HTML5 游戏添加游戏加载程序
- 如何在地图加载后向谷歌地图添加标记
- 在 <对象> 标记中加载 SVG 时,将侦听器添加到 SVG 卸载事件
- 如何将“跨源”标记添加到动态加载的脚本中
- 是否可以在不将其添加到DOM的情况下预加载和缓存视频文件
- 如何将回调添加到 gstatic 加载器.js谷歌图表库
- 添加支持异步重新加载的 Web 图层
- 在加载状态之前,我需要在angular js中为每个状态添加角色
- 将加载添加到 iFrame
- 如何在加载/添加新帖子到提要列表时隐藏帖子元素
- 加载添加了javascript的网站
- 如何加载添加了jQuery的页面
- jquery点击,页面加载添加类