dongtun3328 2019-07-30 11:46
浏览 176
已采纳

如何使用ajax php和mysql正确显示进度条

Am trying to query a large data from the database and I wish to display a progressbar. The code below returns data info from the server but the progressbar just jump into 100% while the ajax is still quering data.

I guess the proper way is to fake the progressbar timer or possibly make a timely ajax call eg per seconds to update the progressbar. can someone help me out with my issue. Thanks

below is the working code so far

<html>
<head>
<script src="jquery.min.js"></script>
<script type="text/javascript">


$(document).ready(function (e) {
 function pf(event) {
                                if (event.lengthComputable) {

                                var percentComplete = Math.round((event.loaded/event.total)*100);

                                $(".progressbar").width(percentComplete + '%');
                                $(".progressbar").html('<span>' + percentComplete +' %</span>')
                                $(".progressbar").html('<span> ' + percentComplete +'% Completed</span>')
                                }
                            };
    $("#sForm").on('submit',(function(e) {
        e.preventDefault();



                   $('.progressbar').css('width', '0');
        $.ajax({

            url: "qdata.php",
            type: "POST",
            data:  new FormData(this),
            contentType: false,
            cache: false,
            processData:false,

                        xhr: function () {
                            var xhr = new window.XMLHttpRequest();
                            xhr.upload.addEventListener("progress", pf, false);
                            return xhr;
                        },

            success: function(data)
            {

    if(data.trim() == "good"){
alert('completed now');
}
            },
            error: function() 
            {
            }           
       });
    }));
});


</script>
</head>
<body>


<div class="progressbar"></div>
<form id="sForm" action="qdata.php" method="post">
<div id="resultdata"></div>

<input type="submit" value="Submit now" />
</form>

</body> 
</html>

qdata.php

  // This is just sample db

    //dbconfig.php
    $result = $db->prepare('SELECT fullname FROM users');
    $result->execute(array());

    $count = $result->rowCount();

    while ($row = $result->fetch()) {

    $name=htmlentities($row['fullname'], ENT_QUOTES, "UTF-8");

    }

echo 'good';
  • 写回答

1条回答 默认 最新

  • douqin7086 2019-07-30 11:52
    关注

    you can show percentage of progress in xhr as

    xhr: function () {
                            //upload Progress
                            var xhr = $.ajaxSettings.xhr();
                            if (xhr.upload) {
                                xhr.upload.addEventListener('progress', function (event) {
    
                                    var percent = 0;
                                    var position = event.loaded || event.position;
                                    var total = event.total;
                                    if (event.lengthComputable) {
                                        percent = Math.ceil(position / total * 100);
                                    }
                                    //update progressbar
                                    console.log('percent', percent);
                                    $('.progressbar').css("width", percent + '%');
                                }, true);
                            }
                            return xhr;
                        },
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥20 matlab中的双层数值积分
  • ¥50 服务器打印水晶报表问题
  • ¥15 Delphi image图片缩放问题
  • ¥30 gradle环境下javafx项目如何使用druid连接池
  • ¥15 服务器打印水晶报表问题
  • ¥15 初学者用plt报错,求解答
  • ¥18 深度学习tensorflow1,ssdv1,coco数据集训练一个模型
  • ¥100 关于注册表摄像头和麦克风的问题
  • ¥30 代码本地运行正常,但是TOMCAT部署时闪退
  • ¥15 关于#python#的问题