jQuery POST请求用户反馈

Question

我有用jQuery帖子请求提交的表单。 像这样：

$('#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的指南（此处链接为https://www.w3schools.com/howto/howto_css_loader.asp）制作了CSS加载程序组件

我这样定制了我的：

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