如何使用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';
dongqigu0429
dongqigu0429 没有一种简单的方法可以对一个完全独立的“进程”进行一次请求检查。PHP有一种机制来检查文件上传的进度,使用会话-但这不容易转移到这种情况。另外,为了能够计算任何类型的百分比,您不仅需要知道您当前的“地点”,还需要知道整体“数量”是什么,并且不容易确定这里开始,直到你的脚本完成。
大约一年之前 回复

1个回答



您可以在 xhr </ code>中显示进度百分比为</ p>

 <  code> xhr:function(){
//上传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);
}
//更新progressbar
console.log('percent',percent);
$('。progressbar')。css(“width”,percent +' %');
},true);
}
返回xhr;
},
</ code> </ pre>
</ div>

展开原文

原文

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;
                    },

dongqi6964
dongqi6964 我想这需要服务器可以预先确定响应的Content-Length? 否则,我不知道如何确定event.total。 如果是这种情况,它可能不会有太多帮助 - 因为在处理完所有记录之前,服务器将如何做到这一点。
大约一年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问