Php Jquery:：Ajax支持的进度条？

我有一个页面，它使用jquery的ajax函数发送一些消息

可能有超过5万条消息要发送

这显然需要一些时间

我要做的是显示一个进度条，其中包含正在发送的消息

后端是PHP

我该怎么做

---

我的解决方案： 通过原始ajax调用中的唯一标识符发送。
该标识符与完成百分比一起存储在数据库（或用标识符命名的文件等）中

这将随着原始脚本的进行而更新

一个函数被设置为

progress（ident）

该函数对读取百分比的脚本进行ajax调用。
进度条已更新 如果返回的百分比不是100，

---

函数设置一个在1秒后调用自身的超时。

如果使用jQuery，请检查此项：

您可以在每次AJAX成功时提供条的价值

否则，如果不使用JS框架，请参见以下内容：

我没有办法测试它，但它应该是这样的：

    var current = 0;
    var total = 0;
    var total_emails = <?php $total_emails ;?>; 

    $.ajax({

      ...
      success: function(data) {
        current++; // Add one to the current number of processed emails
        total = (current/total_emails)*100; // Get the percent of the processed emails
        $("#progressbar").progressbar("value", total); // Add the new value to the progress bar
      }
    });

var电流=0；
var合计=0；
var total_=；
$.ajax({
...
成功：功能（数据）{
current++；//将一封添加到当前处理的电子邮件数量中
总数=（当前/全部电子邮件）*100；//获取已处理电子邮件的百分比
$（“#progressbar”）.progressbar（“value”，total）；//将新值添加到进度条中
}
});

并确保将jQuery与jQueryUI一起包含，然后在页面的某个位置添加#progressbar容器

但是我可能有一些错误。。。

---

您可能需要对总数进行四舍五入，尤其是如果您有大量电子邮件。

您可以通过

.html（）

将动画gif加载到结果区域，直到ajax函数返回结果为止。只是个主意

关于jQueryUI进度条，您需要通过脚本间歇性地回显一个表示完成百分比的数值，作为指定的javascript变量。例如

// text example php script
if (isset($_GET['twentyfive-percent'])) {
    sleep(2); // I used sleep() to simulate processing
    echo '$("#progressbar").progressbar({ value: 25 });';
    }
if (isset($_GET['fifty-percent'])) {
    sleep(2);
    echo '$("#progressbar").progressbar({ value: 50 });';
    }
if (isset($_GET['seventyfive-percent'])) {
    sleep(2);
    echo '$("#progressbar").progressbar({ value: 75 });';
    }
if (isset($_GET['onehundred-percent'])) {
    sleep(2);
    echo '$("#progressbar").progressbar({ value: 100 });';
    }

下面是我用来让进度条更新位置的函数。有点疯狂，我知道

avail_elem = 0;
function progress_bar() {
    progress_status = $('#progressbar').progressbar('value');
    progress_status_avail = ['twentyfive-percent', 'fifty-percent', 'seventyfive-percent', 'onehundred-percent'];
    if (progress_status != '100') {
        $.ajax({
            url: 'test.php?' + progress_status_avail[avail_elem],
            success: function(msg) {
                eval(msg);
                avail_elem++;
                progress_bar();
                }
            });
        }
    }

如果让我猜的话，我打赌有更好的方法。。。但这就是我测试它时的工作方式。

我就是这样实现的：

    var progressTrigger;
    var progressElem = $('span#progressCounter');
    var resultsElem = $('span#results');
    var recordCount = 0;

    $.ajax({
        type: "POST",
        url: "Granules.asmx/Search",
        data: "{wtk: '" + wkt + "', insideOnly: '" + properties.insideOnly + "', satellites: '" + satIds + "', startDate: '" + strDateFrom + "', endDate: '" + strDateTo + "'}",
        contentType: "application/json; charset=utf-8",
        dataType: "xml",
        success: function (xml) {
            Map.LoadKML(xml);
        },
        beforeSend: function (thisXHR) {
            progressElem.html(" Waiting for response from server ...");
            ResultsWindow.LoadingStart();

            progressTrigger = setInterval(function () {
                if (thisXHR.readyState > 2) {
                    var totalBytes = thisXHR.getResponseHeader('Content-length');
                    var dlBytes = thisXHR.responseText.length;
                    (totalBytes > 0) ? progressElem.html("Downloading: " + Math.round((dlBytes / totalBytes) * 100) + "%") : "Downloading: " + progressElem.html(Math.round(dlBytes / 1024) + "K");
                }
            }, 200);


        },
        complete: function () {
            clearInterval(progressTrigger);
            progressElem.html("");
            resultsElem.html(recordCount);
            ResultsWindow.LoadingEnd();
        },
        failure: function (msg) {
            var message = new ControlPanel.Message("<p>There was an error on search.</p><p>" + msg + "</p>", ControlPanel.Message.Type.ERROR);
        }
    });

var进程触发器；
var progressElem=$（'span#progressCounter'）；
var resultsElem=$（'span#results'）；
var-recordCount=0；
$.ajax({
类型：“POST”，
url:“Granules.asmx/Search”，
数据：“{wtk:'”+wkt+”，insideOnly:“+properties.insideOnly+”，卫星：“+satIds+”，起始日期：“+strDateFrom+”，结束日期：“+strDateTo+”，
contentType:“应用程序/json；字符集=utf-8”，
数据类型：“xml”，
成功：函数（xml）{
LoadKML（xml）；
},
发送前：函数（thisXHR）{
html（“等待服务器的响应…”）；
ResultsWindow.LoadingStart（）；
progressTrigger=setInterval（函数（）{
如果（thisXHR.readyState>2）{
var totalBytes=thisXHR.getResponseHeader（'Content-length'）；
var dlBytes=thisXHR.responseText.length；
（totalBytes>0）？progressElem.html（“下载：”+Math.round（（dlBytes/totalBytes）*100）+“%”：“下载：”+progressElem.html（Math.round（dlBytes/1024）+“K”）；
}
}, 200);
},
完成：函数（）{
清除间隔（progressTrigger）；
html（“”）；
resultsElem.html（记录计数）；
ResultsWindow.LoadingEnd（）；
},
故障：功能（msg）{
var message=new ControlPanel.message（“搜索时出错。
”+msg+“
”，ControlPanel.message.Type.error）；
}
});

是的，我将使用进度条，我问题的主要部分是，如何获得进度？我可能会发疯，但成功不是只有在收到整个响应时才被调用吗？没错，这就是为什么我必须将php脚本分解为4个不同的函数，并进行4个ajax调用。好主意，很棒。我很高兴你成功了！这似乎是一个很好的方法，因为如果您想让进度条测量后台进程的进度，您不想用多个ajax请求来攻击服务器。。。我要测试这个方法，看看我能让它工作得多好！