AJAX表单输出中Progress Bar卡顿无动态进度问题求助

数据老陈

2026-7-16

问题描述

开发了一个AJAX表单，页面内的进度条示例可正常动态运行，但通过AJAX输出的进度条出现异常：仅在加载完成后短暂显示随即消失，完全没有动态进度变化效果。推测是AJAX逻辑与进度条控制脚本存在冲突，需要解决让AJAX输出的进度条正常动态展示。

原代码

Form.htm

<html>
<head>
    <!-- progress bar style  start -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
    .progress,
    .alert {margin: 8px;}   
    .alert {display: none;} 
    .alert-success {
        --bs-alert-color: #2c4238;
        --bs-alert-bg: #f8faff;
        --bs-alert-border-color: #768478;
        width: auto;
        max-width: max-content;
    }   
    @media screen and (max-width: 1568px) {
        .alert-success {
            width: auto;
            max-width: max-content;
        }
    }
    </style>
</head>
<!-- progress bar style  end -->

<body><br>
    <!-- form start -->
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    <form class="form" action="process.php" method="POST" name="checkaddress" id="checkaddress">
    <input type="text" name="v" /> <input type="submit" id="submit" value="Submit" /> 
    </form>
    <!-- form end -->
    
    <!-- ajax output div is here -->
    <div class="done"></div>
    
    <!-- 示例：下面这段进度条代码可正常运行，但通过AJAX调用时就会出现上述卡顿问题 -->
    <br>====================================
    <br> 示例：页面内的进度条可正常动态运行，但AJAX加载的进度条异常
    <br>
    <div class='progress col-md-7 ps-0 pe-0'>
        <div class='progress-bar' role='progressbar' aria-valuenow='60' aria-valuemin='0' aria-valuemax='100' style='width: 60%;'></div>
    </div>
    <div class='alert alert-success' role='alert'>hello xxxxx</div><br>
    
    <!-- form ajax script start -->
    <script>
    $('#checkaddress').on('submit', function(e) {
        var dataToPassToAjax = $(this).serialize();
        $.ajax({
            url: "process.php",
            type: "POST",
            data: dataToPassToAjax,
            cache: false,
            success: function(resultHtml) {
                $('.done').html(resultHtml).fadeIn('slow');
            }
        });
        return false;
    });
    </script>
    <!-- end -->
    
    <!-- progress bar script start -->
    <script>
    var $progress = $('.progress');
    var $progressBar = $('.progress-bar');
    var $alert = $('.alert');
    setTimeout(function() {
        $progressBar.css('width', '10%');
        setTimeout(function() {
            $progressBar.css('width', '30%');
            setTimeout(function() {
                $progressBar.css('width', '45%');
                setTimeout(function() {
                    $progressBar.css('width', '80%');
                    setTimeout(function() {
                        $progressBar.css('width', '90%');
                        setTimeout(function() {
                            $progressBar.css('width', '95%');
                            setTimeout(function() {
                                $progressBar.css('width', '98%');
                                setTimeout(function() {
                                    $progressBar.css('width', '99%');
                                    setTimeout(function() {
                                        $progressBar.css('width', '100%');
                                        setTimeout(function() {
                                            $progress.css('display', 'none');
                                            $alert.css('display', 'block');
                                        }, 500);
                                    }, 500);
                                }, 800);
                            }, 600);
                        }, 700);
                    }, 900);
                }, 600);
            }, 400);
        }, 700);
    }, 800);
    </script>
    <!-- progress bar script end -->
</body>
</html>

process.php

<?php 
$v= $_POST['v'];
echo "<div class='progress col-md-7 ps-0 pe-0'> 
<div class='progress-bar' role='progressbar' aria-valuenow='60' aria-valuemin='0' 
aria-valuemax='100' style='width: 60%;'></div>  
</div>
<div class='alert alert-success' role='alert'>hello $v</div>";
?>

解决方案

问题根源

原进度条脚本仅在页面初始化时执行一次，使用全局选择器选中所有匹配元素，包括后续AJAX加载的元素，最终会隐藏所有进度条，导致AJAX返回的进度条刚插入就被隐藏。
AJAX加载的新元素没有绑定动画逻辑，无法触发动态进度变化。

修改步骤

将进度条动画逻辑封装成可复用函数，接收目标进度条的jQuery对象作为参数，确保只操作指定元素。
在AJAX请求的success回调中，插入HTML后调用该函数，为新加载的进度条启动动画。
初始页面的示例进度条也通过调用该函数启动动画，保持逻辑统一。

修改后的代码

Form.htm（关键修改部分）

<!-- 替换原进度条脚本和AJAX脚本为以下内容 -->
<script>
// 封装进度条动画函数
function startProgressAnimation($targetProgress) {
    var $progressBar = $targetProgress.find('.progress-bar');
    var $alert = $targetProgress.next('.alert');
    
    setTimeout(function() {
        $progressBar.css('width', '10%');
        setTimeout(function() {
            $progressBar.css('width', '30%');
            setTimeout(function() {
                $progressBar.css('width', '45%');
                setTimeout(function() {
                    $progressBar.css('width', '80%');
                    setTimeout(function() {
                        $progressBar.css('width', '90%');
                        setTimeout(function() {
                            $progressBar.css('width', '95%');
                            setTimeout(function() {
                                $progressBar.css('width', '98%');
                                setTimeout(function() {
                                    $progressBar.css('width', '99%');
                                    setTimeout(function() {
                                        $progressBar.css('width', '100%');
                                        setTimeout(function() {
                                            $targetProgress.css('display', 'none');
                                            $alert.css('display', 'block');
                                        }, 500);
                                    }, 500);
                                }, 800);
                            }, 600);
                        }, 700);
                    }, 900);
                }, 600);
            }, 400);
        }, 700);
    }, 800);
}

// 页面初始化时启动示例进度条动画
$(document).ready(function() {
    startProgressAnimation($('.progress').first());
});

// 修改AJAX回调逻辑
$('#checkaddress').on('submit', function(e) {
    var dataToPassToAjax = $(this).serialize();
    $.ajax({
        url: "process.php",
        type: "POST",
        data: dataToPassToAjax,
        cache: false,
        success: function(resultHtml) {
            $('.done').html(resultHtml).fadeIn('slow');
            // 为AJAX加载的进度条启动动画
            startProgressAnimation($('.done .progress'));
        }
    });
    return false;
});
</script>

process.php（调整初始宽度为0，动画更自然）

<?php 
$v= $_POST['v'];
echo "<div class='progress col-md-7 ps-0 pe-0'> 
<div class='progress-bar' role='progressbar' aria-valuenow='0' aria-valuemin='0' 
aria-valuemax='100' style='width: 0%;'></div>  
</div>
<div class='alert alert-success' role='alert'>hello $v</div>";
?>

效果说明

修改后，无论是页面初始的进度条还是AJAX加载的进度条，都会按照预设的时间节点逐步展示进度变化，完成后隐藏进度条并显示成功提示，解决了原有的卡顿和消失问题。

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

AJAX表单输出中Progress Bar卡顿无动态进度问题求助

原代码 #

Form.htm

process.php

问题根源 #

修改步骤 #

修改后的代码 #