JQuery发布请求用户反馈

Question

我有提交带有jQuery post请求的表单。就像这样：

$('#foo').submit(function (e) {
    $.post('/api/baz/break', $(this).serialize())
        .done(function (guidString) {
            // manipulate good result
        })
        .fail(function (data) {
            // manipulate bad result
        });
    e.preventDefault();
});

我的问题是，在良好的结果，没有视觉反馈给用户，以显示一个过程正在完成。

我向用户展示视觉旋转器的最简单方式是什么，让他们看到正在发生的事情？因为页面没有重新加载，因为承诺还没有解决。

Answer 1

所以我自己解决了这个问题。我按照w3schools链接的指南制作了css加载器组件，loader.asp

我是这样定制的：

​

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.loader {
  /*Warning- this class must be attached to a div to work properly, can attach and remove dynamically with javascript for async operations*/
  border-top: 1em solid #106A3A;
  border-right: 1em solid #E58242;
  border-bottom: 1em solid #91D3EF;
  border-left: 1em solid #7F3E97;
  border-radius: 50%;
  width: 7.5em;
  height: 7.5em;
  animation: spin 2s linear infinite;
}

<div class='loader'></div>

​

因此，在js中，我只是在javascript层中添加了组件，如下所示：

$('#foo').submit(function (e) {
    $('#foo').toggle();
    $('fooParent').append('<div class="loader"></div>');
    $.post('/api/baz/break', $(this).serialize())
        .done(function (guidString) {
            // manipulate good result
            $('#foo').toggle();
            $('loader').remove();
        })
        .fail(function (data) {
            // manipulate bad result
            $('#foo').toggle();
            $('loader').remove();
        });
    e.preventDefault();
});