如何在加载时显示进度条，使用ajax
Posted
技术标签:
【中文标题】如何在加载时显示进度条，使用ajax【英文标题】：How to show progress bar while loading, using ajax 【发布时间】：2013-12-04 09:21:58 【问题描述】：我有一个下拉框。当用户从下拉框中选择一个值时，它会执行查询以从数据库中检索数据，并使用 ajax 在前端显示结果。这需要一点时间，所以在这段时间里，我想显示一个进度条。我已经搜索过，我发现了许多关于为上传创建进度条的教程，但我不喜欢任何一个。任何人都可以为我提供一些有用的指导吗？
我的 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>
【问题讨论】：
您不能使用进度条，因为数据库查询在完成之前不会返回任何内容。不过你可以有一个简单的加载动画。 感谢您的回复，您能指导我如何操作吗？ 您可以使用ajaxstart 和ajaxstop 事件显示/隐藏包含动画的div。 您是否对 AJAX 请求有超时 - 或者大致了解请求最多可以多长时间？ 【参考方案1】：此link 描述了如何使用 jquery 向 xhr 对象添加进度事件侦听器。
$.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
);
【讨论】：
这不再适用于 jQuery 1.9.3+。它在完成 1% 时进入事件侦听器，并且再也不会点击它。有什么想法吗？ 您可以尝试使用 jquery 的加载程序超时。在 ajaxstart 上设置计时器并在 ajaxStop 上停止 它不工作。 xhr.upload.addEventListener 中的upload 是什么？
在将percentComplete 乘以 100 后，这对我有用。感谢您的解决方案。
var percentComplete = evt.loaded / evt.total;实际上是：var percentComplete = (evt.loaded / evt.total) * 100;【参考方案2】：
<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");
);
【讨论】：
如果在同一页面上运行其他 ajax 请求怎么办？我们如何对特定的 ajax 请求执行此操作。 @prime，将其分配给一个变量。 @Suvash 他要求进度条显示请求的实时完成进度，而不是您回答的加载程序。【参考方案3】：基本上你需要加载图片从这里免费下载一张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>
这可能对你有帮助
【讨论】：
+1 非常简单直接的 Ajax 请求。为我工作。没有使用下载图片选项，因为我正在为通用应用程序使用进度控制。 简单。没有麻烦，一条线的解决方案。【参考方案4】：这是一个适用于我在 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);
);
当进程完成时关闭进度条
$(document).ajaxStop(function()
// hide the progress bar
$("#progressDialog").modal('hide');
);
【讨论】：
【参考方案5】：$(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="../images/loading_blue2.gif" style="position: fixed; top: 50%; left: 50%;" />
</div>【讨论】：
【参考方案6】：经过大量搜索以显示进度条以进行最优雅的充电的方法后，找不到任何可以满足我的目的的方法。检查请求的实际状态显示 demaziado 复杂，有时 sn-ps 不工作然后创建了一个非常简单的方法，但它给了我寻求（或几乎）的经验，遵循代码：
$.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);
);
【讨论】：
【参考方案7】：我知道已经为这个解决方案编写了很多答案，但是我想展示另一种 javascript 方法（依赖于 JQuery）您只需要包含一个 JS 文件，而不依赖于 CSS 或 Gif 图像 在您的代码中，这将处理在 Ajax 请求期间发生的所有与进度条相关的动画。 你需要像这样简单地传递javascript函数
var objGlobalEvent = new RegisterGlobalEvents(true, "");
这是代码的工作小提琴。 https://jsfiddle.net/vibs2006/c7wukc41/3/
【讨论】：
@searchengine27 此屏幕截图不适用于阅读代码。发布它是为了让您了解加载器的图形预览。如果你能注意到，那么我还包含了代码小提琴的链接，点击它你会得到整个代码。 这超过 400kb... 非常糟糕的解决方案。 @JuanFernandoz 如果大小有问题，那么您可以用您的外部 gif src 替换内联嵌入图像。【参考方案8】：我是这样做的
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");
);
);
【讨论】：
【参考方案9】：试试这个可能对你有帮助
$.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
);
【讨论】：
与操作要求的不接近。他想在加载时显示进度，而不仅仅是加载 gif。【参考方案10】：我一般用这种方式简单又好用
<input id="datainput" type="text">
<div id="result"></div>
<button id="examplebutton"></button>
<script>
$("#examplebutton").click(function()
let data=$("#datainput").val();
$("#result").html("Please Wait.."); // it starts working when the button is clicked
$.ajax(
url:"../ajax/xyz.php",
type:"POST",
data:data:data,
success:function(result)
$("#result").html(result); // When the data comes, the text will be deleted and the data will come.
);
);
</script>
【讨论】：
您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。【参考方案11】：这肯定会奏效。 来了……
function yourFunction()
setTimeout(function()
$('#loading').show();
setTimeout(function()
//your ajax code goes here...
$('#loading').hide();
, 500);
, 300);
您可以根据自己的要求将 css 设置为进度条。默认隐藏此 div。
<div id="loading">
<img id="loading-image" src="img-src" />
</div>
【讨论】：
以上是关于如何在加载时显示进度条，使用ajax的主要内容，如果未能解决你的问题，请参考以下文章