PHP + Mysql 插入 + jQuery 进度条答案

【问题标题】：PHP + Mysql insert into + jQuery progress barPHP + Mysql 插入 + jQuery 进度条
【发布时间】：2013-12-14 11:53:29
【问题描述】：

我无法通过查询将当前插入的行显示到 mysql 中。现在我在 index.php 中有这段代码：

  $('#nacitatATC').click(function() {
    $.ajax({
            xhr: function() {

                    var xhr = new window.XMLHttpRequest();
                    xhr.addEventListener("progress", function(e){
                        var p = (e.loaded / e.total)*100;
                        var prave = $("#progress").html();
                              $("#progress").html(prave+"<br>"+p);
                    });
                return xhr;

            }
            , type: 'post'
            , cache: false
            , url: "/sql.php"});

      });
  });

在 sql.php 中，我有使用 for() 将数据插入 mysql 的 php 代码。 $i 是当前插入行，$pocet 是总行数。

问题在于使用 ajax 显示当前插入行。当 ajax 完成加载时，上面的代码显示在 div #progress "100" 中。

我需要显示 1% 2% 3% 4%... 99% 100% 已完成。感谢您的帮助！

【问题讨论】：

标签： php jquery mysql ajax progress-bar

【解决方案1】：

我认为 php -> flush() 是您正在寻找的。

此示例在我的 debian 上的 php-apache 上完美运行

见ajax-request-progress-percentage-log

PHP端：

header( 'Content-type: text/html; charset=utf-8' );
echo 'Begin ...<br />';
for( $i = 0 ; $i < 10 ; $i++ )
{
    echo $i . '<br />';
    flush();
    ob_flush();
    sleep(1);
}
echo 'End ...<br />';

网站：& javascript：

<!doctype html>
<html>
<head>
    <title>Test Flush</title>
    <meta charset="utf-8">
    <script src="./js/jquery-2.0.3.min.js" type="text/javascript"></script>
<body>
<h1>Hello</h1>
<div id="progress">0%</div>

<p>
</p>
<script type="text/javascript">
    $('h1').click(function() {
    $.ajax({
            xhr: function() {

                    var xhr = new window.XMLHttpRequest();
                    xhr.addEventListener("progress", function(e){
                        console.log(e.currentTarget.response);
                        $("#progress").html(e.currentTarget.response);
                    });
                return xhr;

            }
            , type: 'post'
            , cache: false
            , url: "testFlush.php"
        });

    });

</script>
</body>

还可以查看 Rogers Answer in how-to-flush-output-after-each-echo-call 他在 apache 设置中发现了问题

【讨论】：

请看在线演示：codebook.cz ..progress bar 是 id 为 #progress 的 div ..不要显示任何内容
刚试过！有效，但以 1 秒的步进变化播种神秘文本：
开始 ...
0
2„P˙˙2‚P˙˙2†P˙˙2P˙˙2… P˙˙2P˙˙2‡P˙˙˛€P˙˙˛„P˙˙rÍKA ˙˙UˇAVb
我需要在进度 div 中显示它。当 ajax 完成加载时，这段代码会立即显示所有行。
你用什么浏览器？
对我来说，该行在 ajax 加载后的某一刻显示。看看我的 gif 我看到了什么：gyazo.com/beaabbf2ac5991877ee0942fd22bb92e