如何在php中单击按钮将数据插入数据库时增加进度条答案

【问题标题】：How to increment a progress bar while inserting data into database on button click in php如何在php中单击按钮将数据插入数据库时增加进度条
【发布时间】：2016-11-08 05:53:42
【问题描述】：

我尝试过这样做，但无法做到。以下是我的代码：

<script> 
    $(document).ready(function(){
        var $progressbar = $("#progressbar");
        $progressbar.show();
        $('#uploadForm').on('submit', function(e){
            e.preventDefault();
            $(function(){
                $progressbar.css('width', '30%');
            }); 
            $.ajax({
                url: "insertdata.php",
                type: "POST",
                data: new FormData(this),
                contentType: false,
                processData: false,
                success: function(data){
                    console.log(data);
                    if (data == 'T'){
                        $('#txtname').val("");
                        $('#txtsex').val("");
                        $('#txtage').val("");
                        $('#txterr').val('Record Inserted');
                        $progressbar.css('width', '100%');
                    }
                },
                error: function(data){
                alert("Something went wrong !");
            }
        });
    });
});
</script>

进度条代码如下：

<div class="progress" style="margin-top:100px">
    <div class="progress-bar active" id="progressbar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
        <span class="sr-only">0% Complete</span>
    </div>
</div>

插入数据.php 在这个文件中，数据插入被处理。

我的代码的工作是这样的：当用户按下“提交”按钮时，进度条显示增加 30%，当进程完成 30% 时移动到 100%。

我想要实现的是：在按下提交按钮后，进度条应该显示将数据插入数据库的进度（百分比）。

如何做到这一点？

请帮忙

【问题讨论】：

假设您要插入多行，如果您一次性插入所有行，您将不知道插入的进度。也就是说，如果为了进度条跟踪进度而一次插入一行，会导致插入脚本多次命中，imo浪费资源。
考虑测量平均插入时间，并使用该平均值的简单动画，这是一个谎言，但它适用于 UEx
stackoverflow.com/questions/20453015/progress-bar-ajax-and-php

标签： javascript php mysql ajax

【解决方案1】：

今天我为您提供了一个工作示例。我尽量强调重要的部分。

首先是“做某事”的PHP文件，我称之为progress.php：

progress.php

<?php

if (strlen(session_id()) === 0) {
    session_start();
}
makeProgress();

function makeProgress() {
    $progress = 0;
    $max = 100;
    for ($i = 1; $i <= $max; $i++) {
        if (isset($_SESSION['progress'])) {
            session_start(); //IMPORTANT!
        }
        $progress++;
        $_SESSION['progress'] = $progress;
        session_write_close(); //IMPORTANT!
        sleep(1); //IMPORTANT!
    }
}

打开一个 Session 来存储我们的进度。

现在函数 makeProgress 被启动并运行一个循环来计数进度并休眠一秒钟，然后再次计数。

会话已写入关闭，脚本休眠一秒钟，然后再次启动会话。这对于让其他工作人员访问 Session 和工作时间很重要。如果不关闭，Session 将停止，直到 makeProgress 循环完成，如果没有睡眠，其他脚本不会获得“服务器时间”来做某事，并且会停止到循环结束。

接下来是获取进度的 PHP 文件：

getProgress.php

<?php

if (strlen(session_id()) === 0) {
    session_start();
}

if (isset($_SESSION['progress'])) {
    echo $_SESSION['progress'];
    if ($_SESSION['progress'] == 100) {
        unset($_SESSION['progress']);
    }
} else {
    echo '0';
}

这很简单，它只是启动会话并返回会话变量中的内容。如果达到 100%，它还会取消设置变量。

现在胶水，Javascript文件：进度.js

$('document').ready(function () {
    $('#startProgress').click(function () {
        getProgress();
        console.log('startProgress');
        $.ajax({
            url: "progress.php",
            type: "POST",
            data: {
                'startProgress': 'yes'
            },
            async: true, //IMPORTANT!
            contentType: false,
            processData: false,
            success: function(data){
                if(data!==''){
                    alert(data);
                }
                return false;
            }
        });
        return false;
    });

});

function getProgress() {
    console.log('getProgress');
    $.ajax({
        url: "getProgress.php",
        type: "GET",
        contentType: false,
        processData: false,
        async: false,
        success: function (data) {
            console.log(data);
            $('#progressbar').css('width', data+'%').children('.sr-only').html(data+"% Complete");
            if(data!=='100'){
                setTimeout('getProgress()', 1000);
            }
        }
    });
}

将您的 startProgress ajax 调用设置为 async: true 很重要，否则您的浏览器将停止并等待长时间执行的脚本响应。 getProgress函数在你点击按钮时启动，只要返回的数据不是100，就会每隔一秒执行一次。很简单。

最后有一个html文件，进度可见：

progress.html

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
        <script type="text/javascript" src="progress.js"></script>
    </head>
    <body>
        <form action="progress.php" method="POST" >
            <input id="startProgress" type="submit" name="startProgress" value="start progress"/>
        </form>
        <div class="progress" style="margin-top:100px">
            <div class="progress-bar active" id="progressbar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 0%; background-color: #399;">
                <span class="sr-only">0% Complete</span>
            </div>
        </div>
    </body>
</html>

现在查看操作中的工作示例并下载我在这里使用的所有文件：

https://9tw.de/~testArea/progress/progress.html

需要解决的问题：由于最初的ajax调用是异步的，有可能点击不止一次，什么会导致进度条波动（因为现在有2到n个脚本同时运行并写到相同的会话变量）。您可能希望在当前进程完成之前阻止第二次点击。

另一件事：如果你每秒都睡一秒钟，脚本执行时间会加倍。您需要在执行时间和进度条更新之间找到一个很好的折衷方案。

还有其他（甚至更好的）技术可以实现进度条，例如线程，但由于线程很少被编译到 PHP 中，这应该是迄今为止最兼容（主机）的解决方案。

快乐编码。

【讨论】：

谢谢，我已经尝试添加“progress:function(evt)”部分，但没有任何反应意味着当按下按钮时进度条没有增加。可能是我做错了什么。您能否通过提供一些示例来指导我如何使用此功能。
我想，但时间不多。我认为我的脚本仅适用于上传文件。这是一篇关于该主题的文章，您可能会感兴趣：htmlgoodies.com/beyond/php/…
有人有什么想法吗？？
iam 在这里，因为我注意到对这个问题/答案进行了编辑。我发现在一个 PHP 文件的两个位置上找到两个 session_start() 非常奇怪，但对于其余部分来说，它看起来很可靠+ 1
哦，是的，因为session_write_close() 将关闭会话文件，这或多或少是有意义的。但是重写仍然需要/不应该需要在一个文件中使用两个session_start()，这可能可以导致错误。