javascript - 加载时的 Django 微调器 (spin.js)

Question

我是 Django 和这方面的新手，我需要一些提示或解决方案来添加微调器。我正在使用 spin.js，我以这种方式展示它:

 var target = document.getElementById('spin');
    var spinner = new Spinner(opts).spin(target);
    spinner.stop();
    function spin_stop()
    {
        spinner.stop();
    }
    function spin_start()
    {
        spinner.spin(target);
    }

这段代码是从网络上的一些例子中复制过来的。我用 <div id...> 显示微调器

现在有一个问题。

我在 Django 中有一个名为 testScript 的应用程序。该应用程序连接到不同的页面以验证登录信息。这是一个“漫长”的过程，大约需要 10 秒。那时，我想在我的登录页面上添加一个微调器。在模板中我有一个表单:

<form class="form-signin" action="/testScript/" method="post">

如果我想以这种形式在我的按钮中添加 onclick 事件，我的微调器会卡住。

当我的 testScript 正在处理时，我如何显示微调器？

谢谢

Answer 1

微调器卡住，因为浏览器已更改页面并正在等待新页面响应。

您可以尝试使用 an animated gif作为微调器而不是 spin.js，但这也可能会卡住。

如果您的验证过程确实需要 10 秒以上，那么您最好的选择是使用 Ajax 提交 POST，然后在服务器响应后重定向或显示响应。

如何使用 Ajax 取决于您的工作流程。如果您不介意额外的库，通过 Ajax 进行 POST 的最简单方法是使用 jQuery。响应后，在页面上的 div 中显示响应或重定向到另一个 View 。

$.ajax({
    url: "/testScript/",
    method: "POST",
    data: { //form data
    },
    success: function(data) {
        //Display response here
    },
    complete: function() {
        //Hide spinner here
    }
});

这是非常准系统，因为我没有足够的关于您的应用程序或标记的详细信息，但这里有很多类似的解决方案可以帮助您。