如何在加载时使用ajax显示进度条
我有一个下拉框。 当用户从下拉框中select一个值时，它会执行查询以从数据库中检索数据，并使用ajax在前端显示结果。 这需要一点时间，所以在这段时间，我想要显示一个进度条。 我已经search，我已经find了许多关于创build进度条上传的教程，但我不喜欢任何。 任何人都可以为我提供一些有用的指导吗？
我的ajax代码：
<script> $(function() { $("#client").on("change", function() { var clientid=$("#client").val(); $.ajax({ type:"post", url:"clientnetworkpricelist/yourfile.php", data:"title="+clientid, success:function(data){ $("#result").html(data); } }); }); }); </script> 这个链接描述了如何将进度事件监听器添加到xhr对象jquery中。
$.ajax({ xhr: function() { var xhr = new window.XMLHttpRequest(); // Upload progress xhr.upload.addEventListener("progress", function(evt){ if (evt.lengthComputable) { var percentComplete = evt.loaded / evt.total; //Do something with upload progress console.log(percentComplete); } }, false); // Download progress xhr.addEventListener("progress", function(evt){ if (evt.lengthComputable) { var percentComplete = evt.loaded / evt.total; // Do something with download progress console.log(percentComplete); } }, false); return xhr; }, type: 'POST', url: "/", data: {}, success: function(data){ // Do something success-ish } });
<script> $(function() { $("#client").on("change", function() { var clientid=$("#client").val(); //show the loading div here $.ajax({ type:"post", url:"clientnetworkpricelist/yourfile.php", data:"title="+clientid, success:function(data){ $("#result").html(data); //hide the loading div here } }); }); }); </script>
或者你也可以这样做：
$(document).ajaxStart(function() { // show loader on start $("#loader").css("display","block"); }).ajaxSuccess(function() { // hide loader on success $("#loader").css("display","none"); });
基本上你需要有加载图像从这里下载免费的一个http://www.ajaxload.info/
$(function() { $("#client").on("change", function() { var clientid=$("#client").val(); $('#loadingmessage').show(); $.ajax({ type:"post", url:"clientnetworkpricelist/yourfile.php", data:"title="+clientid, success:function(data){ $('#loadingmessage').hide(); $("#result").html(data); } }); }); });
在html身上
<div id='loadingmessage' style='display:none'> <img src='img/ajax-loader.gif'/> </div>
可能这可以帮助你
这里是一个在Razor中使用MVC和Javascript的例子。 第一个函数通过我的控制器上的ajax调用一个动作并传递两个参数。
function redirectToAction(var1, var2) { try{ var url = '../actionnameinsamecontroller/' + routeId; $.ajax({ type: "GET", url: url, data: { param1: var1, param2: var2 }, dataType: 'html', success: function(){ }, error: function(xhr, ajaxOptions, thrownError){ alert(error); } }); } catch(err) { alert(err.message); } }
使用ajaxStart开始你的进度条码。
$(document).ajaxStart(function(){ try { // showing a modal $("#progressDialog").modal(); var i = 0; var timeout = 750; (function progressbar() { i++; if(i < 1000) { // some code to make the progress bar move in a loop with a timeout to // control the speed of the bar iterateProgressBar(); setTimeout(progressbar, timeout); } } )(); } catch(err) { alert(err.message); } });
当进程完成时closures进度条
$(document).ajaxStop(function(){ // hide the progress bar $("#progressDialog").modal('hide'); });
$(document).ready(function () { $(document).ajaxStart(function () { $('#wait').show(); }); $(document).ajaxStop(function () { $('#wait').hide(); }); $(document).ajaxError(function () { $('#wait').hide(); }); });
<div id="wait" style="display: none; width: 100%; height: 100%; top: 100px; left: 0px; position: fixed; z-index: 10000; text-align: center;"> <img src="..http://img.dovov.comloading_blue2.gif" width="45" height="45" alt="Loading..." style="position: fixed; top: 50%; left: 50%;" /> </div>
试试这可能会帮助你
$.ajax({ type:"post", url:"clientnetworkpricelist/yourfile.php", data:"title="+clientid, beforeSend: function( ) { // load your loading fiel here } }) .done(function( data ) { //hide your loading file here });
我是这样做的
CSS
html { -webkit-transition: background-color 1s; transition: background-color 1s; } html, body { /* For the loading indicator to be vertically centered ensure */ /* the html and body elements take up the full viewport */ min-height: 100%; } html.loading { /* Replace #333 with the background-color of your choice */ /* Replace loading.gif with the loading image of your choice */ background: #333 url('/Images/loading.gif') no-repeat 50% 50%; /* Ensures that the transition only runs in one direction */ -webkit-transition: background-color 0; transition: background-color 0; } body { -webkit-transition: opacity 1s ease-in; transition: opacity 1s ease-in; } html.loading body { /* Make the contents of the body opaque during loading */ opacity: 0; /* Ensures that the transition only runs in one direction */ -webkit-transition: opacity 0; transition: opacity 0; }
JS
$(document).ready(function () { $(document).ajaxStart(function () { $("html").addClass("loading"); }); $(document).ajaxStop(function () { $("html").removeClass("loading"); }); $(document).ajaxError(function () { $("html").removeClass("loading"); }); });
经过多次search的方式来显示进度条，只是为了让最优雅的收费找不到任何方式来满足我的目的。 检查显示demaziado复杂的请求的实际状态，有时片段不工作然后创build一个非常简单的方法，但它给了我寻求（或几乎）的经验，遵循代码：
$.ajax({ type : 'GET', url : url, dataType: 'html', timeout: 10000, beforeSend: function(){ $('.my-box').html('<div class="progress"><div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div></div>'); $('.progress-bar').animate({width: "30%"}, 100); }, success: function(data){ if(data == 'Unauthorized.'){ location.href = 'logout'; }else{ $('.progress-bar').animate({width: "100%"}, 100); setTimeout(function(){ $('.progress-bar').css({width: "100%"}); setTimeout(function(){ $('.my-box').html(data); }, 100); }, 500); } }, error: function(request, status, err) { alert((status == "timeout") ? "Timeout" : "error: " + request + status + err); } });
