在数据处理期间显示微调器

Question

我为一些数据处理编写了一个 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('不可见')

  $.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...

塞巴斯蒂安

Answer 1

您可以使用，ajax 允许您使用 beforeSend 添加一个操作，并且无论成功还是失败，ajax 完成时都会运行完成。

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')
  },
});

Answer 2

最简单的方法是： 使用不可见类创建一个微调器元素。 在 API 调用之前，将微调器设置为可见（删除不可见的类）。 API调用后，无论成功还是错误，重新设置为不可见。

Answer 3

您的服务器需要返回一个 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)
      }
   })

 }

Answer 4

忘记视频中那个人做了什么关于设置课程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);
    }
});