加载时的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);
    }

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

现在出现了一个问题。

我在姜戈有一个名为testScript的应用程序。该应用程序连接到不同页面以验证登录信息。这是一个“长”的过程，大约需要10秒。在此期间，我希望在我的登录页面上添加一个微调控件。在模板中，我有一个表单：

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

如果我想在这个表单的按钮中添加onclick事件，我的微调器就会冻结。

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

谢谢

Answer 1

微调控件冻结是因为浏览器更改了页面并等待新页面响应。

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

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

如何使用Ajax执行此操作取决于您的工作流程。使用Ajax发布的最简单的方法是使用jQuery，如果你不介意额外的库的话。响应后，在页面的div中显示响应，或者重定向到另一个视图。

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

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