Добавьте класс на успех AJAX и удалите его по завершении

Question

У меня Ajax-вызов, и когда он отправляет данные на мой сервер, а затем мой сервер устанавливает соединение с третьим провайдером, я хотел бы добавить какой-нибудь загрузчик, чтобы пользователь не чувствовал страницу простоfreezed.

<div class="general-container"></div>

if (Culqi.token) {
  $.ajax({
    type: 'POST',
    url: "{% url 'cart:cart_charge' %}",
    data: {
      amount: {{ culqi_total }},
      currency_code: 'PEN',
      email: Culqi.token.email,
      source_id: Culqi.token.id,
      last_four: Culqi.token.last_four,
    },
    success: function() {
      $('.general-container').addClass("preloader");
    },
    complete: function() {
      $('.general-container').addClass("complete");
    }
  })
}

body {
  margin: 0;
  padding: 0;
}

.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /*background: #000;*/
  transition: 1s;
}

.preloader:before {
  content: '';
  position: absolute;
  left: 0;
  width: 50%;
  height: 100%;
  background: #000;
  transition: 1s;
}

.preloader:after {
  content: '';
  position: absolute;
  right: 0;
  width: 50%;
  height: 100%;
  background: #000;
  transition: 1s;
}

.preloader.complete:before {
  left: -50%;
}

.preloader.complete:after {
  right: -50%;
}

Плюс, кроме удаления черного фона "preloader", я бы хотел перенаправить пользователя на этот URL (я использую Django):

window.location.href = "{% url 'cart:thank_you' %}";

Answer 1

В комментариях вы указали, что вы намерены добавить класс к .general-container, когда AJAX-запрос запускается .Это отличается от вашей текущей логики, так как вы добавляете класс, когда запрос AJAX завершается успешно.

Чтобы сделать то, что вам нужно, добавьте класс перед , который вы вызываете $.ajax(), затем выможете удалить его (при необходимости) в success перед выполнением перенаправления.Примерно так:

if (Culqi.token) {
  var $container = $('.general-container').addClass("preloader");
  $.ajax({
    type: 'POST',
    url: "{% url 'cart:cart_charge' %}",
    data: {
      amount: {{ culqi_total }},
      currency_code: 'PEN',
      email: Culqi.token.email,
      source_id: Culqi.token.id,
      last_four: Culqi.token.last_four,
    },
    success: function() {
      $container.addClass("complete");
      window.location.href = "{% url 'cart:thank_you' %}";
    },
    error: function() {
      console.log('something went wrong, do some debugging!');
    }
  })
}

Обратите внимание, что complete класс может не отображаться при перенаправлении, поскольку страница может быть выгружена при изменении местоположения страницы.