我有以下 JS 从 Rails 应用程序中的 Controller 方法检索一些 JSON 数据:
$.ajax({
xhr: function() {
var xhr = $.ajaxSettings.xhr();
xhr.onprogress = function(e) {
if (e.lengthComputable) {
console.log(e.loaded / e.total);
}
};
xhr.upload.onprogress = function(e) {
if (e.lengthComputable) {
console.log(e.loaded / e.total);
}
};
return xhr;
},
cache: false,
url: '/get_data',
method: 'GET',
dataType: 'JSON',
success: function(data) {
console.log(data);
}
});
方法如下:
def get_data
@data = [{....}]
respond_to do |format|
format.html
format.json do
response.headers['Content-Length'] = @data.to_s.length.to_s
render json: @data
end
end
end
由于 @data 很大或首先需要复杂的计算，该方法最多可能需要 3-4 秒才能返回，因此我想在 AJAX 发生时显示进度条.
注意:我不只是想显示在 AJAX 之前和之后显示的加载程序，而是要实际显示进度!
但是我发现 lengthComputable 总是错误的...
如何让 Rails 发回正确的进度？我已经添加了 Content-Length header ，但它从未出现在响应中...
最佳答案
我错了。这不是真正的进度条，但想法是这样的:
$(function() {
var pg = 0;
function progressbarAdd(){
pg++;
$('#bar').progressbar('option', 'value', pg).children('.ui-progressbar-value').css('display', 'block');
}
$('#bar').progressbar({ value: 0 });
$(document).on({
ajaxStart: function(){
timer = setInterval(function(){
progressbarAdd()
}, 100);
},
ajaxStop: function(){
clearTimeout(timer);
$('#bar').progressbar('option', 'value', 100);
}
});
$.ajax({
method: 'GET',
url:'https://viacep.com.br/ws/01001000/json/',
dataType: 'json',
success: function() {
console.log('JSON:', arguments[0]);
},
error: function() {
console.log('Fail');
}
});
});<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/black-tie/jquery-ui.css" />
</head>
<body>
<div id="bar"></div>
</body>
</html>关于javascript - 获取 AJAX 调用的进度以在 Rails 中获取 JSON，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39874012/