我写了一个 django 应用程序来处理一些数据。在某些情况下,可能需要等待几分钟才能完成处理。所以我想在用户点击“执行”后立即在页面上显示一个微调器,并且一直在处理,直到页面刷新以显示结果...... 我遵循了一个教程 (here),我可以在其中设置应用程序并在页面加载时显示微调器。但这并不是我想要的。
以下 JS 代码来自视频并在页面加载之前显示微调器:
const spinnerbox = document.getElementById('spinner-box')
//console.log(spinnerbox)
$.ajax({
type: 'GET',
url: '/',
success : function(response){
spinnerbox.classList.add('not-visible')
console.log('response', response)
},
error : function(error){
console.log(error)
}
})
我想我需要修改这段代码,类型应该是“POST”,但我不知道在脚本旁边添加什么。 感谢您的帮助!
[编辑] 我可以使用此代码更进一步:
const spinnerbox = document.getElementById('spinner-box') const submitbox = document.getElementById('submit-box')
submitbox.addEventListener('mouseup', ()=>{ spinnerbox.classList.remove('not-visible')
$.ajax({
type: 'POST',
url: '/',
success : function(response){
spinnerbox.classList.add('not-visible')
console.log('response is success')
},
error : function(error){
console.log('error')
console.log(error)
//spinnerbox.classList.add('not-visible')
},
// shows the loader element before sending.
beforeSend: function() {
console.log('In beforeSend...')
//show spinner
spinnerbox.classList.remove('not-visible')
},
// hides the loader after completion of request, whether successfull or failor.
complete: function() {
console.log('In complete...')
//spinnerbox.classList.add('not-visible')
},
})
})
但我想这不干净。当我使用浏览器进行检查时,会发生以下情况:
In beforeSend... main.js:24:21
XHRPOSThttp://127.0.0.1:8000/
error main.js:18:21
Object { readyState: 0, getResponseHeader: getResponseHeader(e), getAllResponseHeaders: getAllResponseHeaders(), setRequestHeader: setRequestHeader(e, t), overrideMimeType: overrideMimeType(e), statusCode: statusCode(e), abort: abort(e), state: state(), always: always(), catch: catch(e)
, … }
abort: function abort(e)
always: function always()
catch: function catch(e)
done: function add()
fail: function add()
getAllResponseHeaders: function getAllResponseHeaders()
getResponseHeader: function getResponseHeader(e)
overrideMimeType: function overrideMimeType(e)
pipe: function pipe()
progress: function add()
promise: function promise(e)
readyState: 0
setRequestHeader: function setRequestHeader(e, t)
state: function state()
status: 0
statusCode: function statusCode(e)
statusText: "error"
then: function then(t, n, r)
<prototype>: Object { … }
main.js:19:21
In complete...
塞巴斯蒂安
答案 0 :(得分:0)
你可以使用,ajax 允许你使用 beforeSend 添加一个动作,并且在 ajax 完成时,无论成功或失败,都将运行 complete。
const spinnerbox = document.getElementById('spinner-box')
$.ajax({
type: 'GET',
url: '/',
success : function(response){
spinnerbox.classList.add('not-visible')
console.log('response', response)
},
error : function(error){
console.log(error)
},
// shows the loader element before sending.
beforeSend: function() {
//show spinner
spinnerbox.classList.add('visible')
},
// hides the loader after completion of request, whether successfull or failor.
complete: function() {
spinnerbox.classList.add('not-visible')
},
});
答案 1 :(得分:0)
最简单的方法是: 创建一个带有不可见类的微调元素。 在 API 调用之前,将微调器设置为可见(删除不可见的类)。 API 调用后,无论成功还是错误,再次将其设置为不可见。
答案 2 :(得分:0)
您的服务器需要返回一个 json 以在同一页面中显示数据,或者您可以重定向到另一个 url。
function sendViaAjax(){
const spinnerbox = document.getElementById('spinner-box') // Get spinner
spinnerbox.classList.add('visible') // turn spiner visible
$.ajax({
type: 'POST',
url: '/url ', // you send data
dataType: 'json',
success : function(response){
spinnerbox.classList.add('not-visible')
console.log('response', response)
window.location = "/url" // url you show data
},
error : function(error){
console.log(error)
}
})
}
答案 3 :(得分:0)
忘记那个人在视频中做了什么关于设置类 not-visible
的事情。只需将 div 上的 内联样式 设置为 display:none
。
微调div:
<div class="text-center">
<div class="spinner-border" role="status" style="display:none">
<span class="visually-hidden">Loading...</span>
</div>
</div>
现在在你的 js 中你甚至可以使用淡入和淡出效果,因为你也用 jQuery 标记了你的问题。
在您的 js 调用中:
const spinnerbox = $(".spinner-border");
// Fade in effect to start displaying the spinner div as the process starts...
spinnerbox.fadeIn(1000);
$.ajax({
type: 'POST',
url: '/',
data: whatever data to be processed here,
success : function(response){
// Fade out effect to stop displaying the spinner div as the process ends...
spinnerbox.fadeOut(1000);
console.log('response', response);
},
error : function(error){
// Fade out effect to stop displaying the spinner div as the process ends...
spinnerbox.fadeOut(1000);
console.log(error);
}
});