Question

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

$url = 'https://wholelifeclinics.com/wp-content/themes/sydney/style.min.css';
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$response = curl_exec($ch);
if ($response === false) {
    throw new RuntimeException(curl_error($ch));
}
echo $response;

我的问题是，在良好的结果上，用户没有可视反馈来表明流程正在完成。

最简单的方法是向用户展示一个可视化的微调器，让他们看到正在发生的事情？由于该承诺尚未得到解决，因此页面无法重新加载。

Answer 1

所以我设法自己解决这个问题。我按照这里链接的w3schools https://www.w3schools.com/howto/howto_css_loader.asp

的指导原则制作了一个css加载程序组件

我是这样定制的：

＆＃13;

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

＆＃13;

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

＆＃13;

所以在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();
});

JQuery POST请求用户反馈

1 个答案: