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('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...

塞巴斯蒂安

Answer 1

你可以使用，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')
  },
});

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

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

4 个答案: