Jquery :: Ajax动力进度条？
我有一个页面，它使用jquery的ajax函数来发送一些消息。
可能会发送超过50k的消息。
这显然需要一些时间。
我要做的是显示一个进度条，其中包含正在发送的消息。
后端是PHP。
我怎样才能做到这一点？
我的解决方案：通过原始ajax调用中的唯一标识符发送。
此标识符存储在数据库（或使用标识符等命名的文件）中，以及完成百分比。
这会在原始脚本继续时更新。
一个名为progress(ident)的函数被设置
该函数对读取百分比的脚本进行ajax调用。
进度条更新如果返回的百分比不是100，
该函数设置超时，在1秒后调用自身。
您可以通过.html()将动画gif加载到结果区域，直到您的ajax函数返回结果。 只是一个想法。
关于jquery ui进度条，间歇性地通过您的脚本，您将要回显一个表示完成百分比的数值作为指定的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 });'; }
以下是我用来获取进度条以更新其位置的function。 我知道，有点坚果。
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(); } }); } }
如果我不得不猜测，我打赌有一种更好的方法……但是当我测试它时，这就是它对我有用的方式。
如果你使用jQuery检查这个： http ： //docs.jquery.com/UI/Progressbar
您可以在每次AJAX成功时提供该栏的价值。
否则，如果你不使用JS Framework，请看： http ： //www.redips.net/javascript/ajax-progress-bar/
我没有办法测试它，但它应该是这样的：
var current = 0; var total = 0; var 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 } });
并确保您将jQuery与jQueryUI一起包含在内，然后在页面的某处添加#progressbar容器。
我可能会有一些错误……你可能需要对总数进行舍入，特别是如果你有很多电子邮件的话。
使用此回答的问题
这就是我实现它的方式：
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("There was an error on search.
" + msg + "
", ControlPanel.Message.Type.ERROR); } });