使用jQuery和HTML实现的进度条提交表单后页面刷新不显示问题

问题原因 #

表单默认同步提交会触发页面刷新，你绑定在提交按钮点击事件上的进度条动画刚触发，页面就重载重置了所有DOM和JS状态，因此进度条无法正常展示。

解决方案1：改为异步表单提交（优先推荐） #

阻止表单默认提交行为，用AJAX提交表单数据，全程无页面刷新，进度条可以正常执行完成，修改后代码如下：

$(document).ready(function() {
    // 绑定表单提交事件而非按钮点击事件
    $('#yourFormId').submit(function(e){
        // 阻止默认表单同步提交
        e.preventDefault();
        // 先触发进度条动画
        animateProgressBar(90);
        // 异步提交表单数据
        $.ajax({
            url: $(this).attr('action'),
            type: $(this).attr('method'),
            data: $(this).serialize(),
            success: function(res) {
                // 提交完成后进度条走到100%
                animateProgressBar(100);
                // 后续可自定义提交成功逻辑，比如跳转、弹出提示
            }
        })
    });
    function animateProgressBar(percentageCompleted) {
        $('#innerDiv').animate({
            'width':(1000*percentageCompleted)/100 
        },1000);
        $({counter: 1}).animate({counter:percentageCompleted},{
            duration:1000,
            step:function() {
                $('#innerDiv').text(Math.ceil(this.counter)+'%');
            }
        })
    }
});

使用时需要把#yourFormId替换为你自己表单的ID属性值。

解决方案2：同步提交场景下用本地存储持久化进度 #

如果你必须保留同步提交的逻辑，可以通过sessionStorage存储进度状态，页面刷新后读取存储值恢复进度条展示：

$(document).ready(function() {
    // 页面加载后先检查是否有存储的进度
    const savedProgress = sessionStorage.getItem('formProgress');
    if (savedProgress) {
        // 有存储值直接渲染进度条
        animateProgressBar(Number(savedProgress));
        // 用完清除存储，避免下次进入页面重复触发
        sessionStorage.removeItem('formProgress');
    }

    $('#myBtn').click(function(){
        // 点击提交时先存进度到sessionStorage
        sessionStorage.setItem('formProgress', 90);
        animateProgressBar(90);  
    });

    function animateProgressBar(percentageCompleted) {
        $('#innerDiv').animate({
            'width':(1000*percentageCompleted)/100 
        },1000);
        $({counter: 1}).animate({counter:percentageCompleted},{
            duration:1000,
            step:function() {
                $('#innerDiv').text(Math.ceil(this.counter)+'%');
            }
        })
    }
});

内容的提问来源于stack exchange，提问作者aniket sinha