Question

我已经尝试过这样做但却无法得到它。以下是我的代码：

<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>

insertdata.php 在此文件中，处理数据插入。

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

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

如何实现这一目标？

请帮忙

Answer 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!
    }
}

会话已打开，我们的进度将存储在其中。

现在启动函数makeProgress并运行一个循环，计算进度并暂停一秒钟，然后再次计数。

会话是write_closed，脚本会休眠一秒钟，之后会话再次启动。这对于让其他员工访问会话和工作时间非常重要。在没有关闭的情况下，会话将停止，直到makeProgress循环结束，没有睡眠没有其他脚本获得“Servertime”做某事并且将被停顿直到循环结束。

接下来获取进度的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文件： progress.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非常重要，否则您的浏览器将停止并等待执行较长的脚本进行响应。只要返回的数据不是100，单击按钮并每秒再次执行时，就会启动getProgress函数。简单。

最后有一个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>

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

https://9tw.ssl-secured-server.de/~testArea/progress/progress.html

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

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

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

快乐编码。

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

1 个答案:

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

1 个答案:

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