javascript 当表单提交到另一个页面时如何制作加载进度条
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20917250/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make a Loading Progress bar when form submit goes to one page to another page
提问by Sukanta Roy Sujan
I have a page form.php whenever i fill the form and click on submit button it's go to code.php and then show the result on another page named ipo.php
每当我填写表单并单击提交按钮时，我都会有一个页面 form.php，它会转到 code.php，然后在名为 ipo.php 的另一个页面上显示结果
i want to show a Loading progressbar in between form.php to ipo.php
我想在 form.php 到 ipo.php 之间显示一个加载进度条
plz anyone help me ??
请问有人帮帮我吗？？
回答by Dmitriy.Net
Page always loading from up to down. Knowing this, we can construct an architecture of loader
页面总是从上到下加载。知道了这一点，我们就可以构建一个loader的架构
The first step, we create loader div that will be an overlay over all layers of a website. When site loading, we will see loader. As for your question, you must create this div on pages form.php and ipo.php. On the page form.php, you can add CSS attribute "display: none"
第一步，我们创建加载器 div，它将覆盖网站的所有层。当站点加载时，我们会看到 loader。至于你的问题，你必须在页面 form.php 和 ipo.php 上创建这个 div。在form.php页面，可以添加CSS属性“display:none”
<div id="loader" style="position: fixed; top:0; left:0; width:100%; height: 100%; background: url('loader.gif') center center #efefef"></div>
The second step, we must hide the loader when the page already loaded. At this step, we use the jQuery method $.ready
第二步，我们必须在页面已经加载时隐藏加载器。在这一步，我们使用 jQuery 方法 $.ready
$(document).ready(function()
{
$('#loader').hide();
})
The third step, we must intercept handler of clicking to link at form.php, and show the loader before the page is unloaded
第三步，在form.php拦截点击链接的handler，在页面卸载前显示loader
$(document).ready(function()
{
$('form').submit(function()
{
$('#loader').show();
})
})
As result, we have small jquery function for showing the loader, when the user submits the form at form.php and redirect to ipo.php
结果，当用户在 form.php 提交表单并重定向到 ipo.php 时，我们有一个小的 jquery 函数来显示加载器
$(document).ready(function()
{
$('#loader').hide();
$('form').submit(function()
{
$('#loader').show();
})
})
回答by Momin Al Aziz
For progress bar take a look at this:REF
对于进度条，看看这个：REF
You can put code.phpint the action of that form in form.php. To load ipo.phpyou have to add a success in ajax like
您可以code.php将该表单的操作放入form.php. 要加载，ipo.php您必须在 ajax 中添加成功，例如
success: function(data){
$("#place you want to load").load("ipo.php");
}
there are other solutions/plugins available for this too.
还有其他可用的解决方案/插件。
