如何在表单提交到一个页面到另一个页面时创建“加载进度”栏

Question

每当我填写表单并单击提交按钮时，我都会有一个页面form.php，它会转到code.php，然后在另一个名为ipo.php的页面上显示结果

我想在form.php和ipo.php之间显示一个加载进度条

是的，有人帮我吗？

Answer 1

页面始终从上到下加载。知道了这一点，我们就可以构建一个加载器架构

第一步，我们创建加载器div，它将覆盖网站的所有层。当站点加载时，我们将看到加载器。至于你的问题，你必须在页面form.php和ipo.php上创建这个div。在页面form.php上，您可以添加CSS属性＆＃34; display：none＆＃34;

<div id="loader" style="position: fixed; top:0; left:0; width:100%; height: 100%; background: url('loader.gif') center center #efefef"></div>

第二步，我们必须在页面已经加载时隐藏加载器。在这一步，我们使用jQuery方法$ .ready

$(document).ready(function() 
{
    $('#loader').hide();
})

第三步，我们必须拦截在form.php上点击链接的处理程序，并在卸载页面之前显示加载程序

$(document).ready(function() 
{
    $('form').submit(function() 
    {
        $('#loader').show();
    }) 
})

结果，当用户在form.php上提交表单并重定向到ipo.php时，我们有一个小的jquery函数来显示加载器

$(document).ready(function() 
{
    $('#loader').hide();

    $('form').submit(function() 
    {
        $('#loader').show();
    }) 
})

Answer 2

对于进度条，请看一下：REF

您可以在code.php中将form.php置于该表单的操作中。要加载ipo.php，您必须在ajax中添加成功，例如

success: function(data){
   $("#place you want to load").load("ipo.php");
}

还有其他可用的解决方案/插件。