Как показать сообщение об успехе и обновить страницу вместе

Question

У меня есть код сервлета JSP, который использует AJAX для обработки пользовательских данных. В функции success AJAX я хочу показать пользователю сообщение об успехе, а также очистить все поля формы, поэтому я перезагружаю страницу. Однако, когда я перезагружаюсь, предупреждение исчезает. Какое решение для этого?

$.ajax({
  url: '../Groups',
  data: {
    "mode": "create_assign",
    "name": name,
    "desc": desc,
    "status": status,
    "add": listadd
  },
  type: 'POST',
  success: function(response) {
    $.notify({
      message: "Created group successfully.",
    }, {
      type: "success"
    });
    location.reload();
  },
  error: function(jqXHR, textStatus, message) {
    $.notify({
      message: "System Error: Please try again or contact system admin.",
    }, {
      type: "danger"
    });
  },
  complete: function() {
    $('.overlay').hide();
  }
});

Answer 1

Перезагрузка страницы после выполнения запроса AJAX довольно избыточна.Это делает весь смысл AJAX-запроса спорным.

Если все, что вы хотите сделать, это очистить поля в форме после отправки, вы можете сделать это вручную:

success: function(response) {
  $.notify("Created group successfully.", "success");
  $('#yourForm input').val('');
},

В качестве альтернативы,Вы можете просто сбросить form в исходное состояние:

success: function(response) {
  $.notify("Created group successfully.", "success");
  $('#yourForm').trigger('reset');
},

Обратите внимание, что в приведенных выше примерах используется менее подробный сокращенный вызов $.notify(), как видно из документации

Answer 2

Или вместо перезагрузки страницы вы можете отобразить сообщение об успехе, а затем получить входные данные формы и очистить их, что будет выглядеть примерно так:

$('#yourForm').each(function(){
    this.reset();
});

Answer 3

Это избыточно, как упомянуто Крисом, но вы рассматривали возможность использования setTimeout ()?

Вы можете сделать это, например:

function successFunction(response) {
  $.notify({ message: "Created group successfully." }, { type: "success" });
  setTimeout(location.reload(), 4000); // time in milliseconds
}

и в свой основной вызов ajax добавьте:

success: successFunction(response)