проблемы, чтобы показать сообщение об успешном после Ajax вызова

Question

У меня есть html формы, которым, его данные передаются корыта в AJAX пост в php файла.

После вставки в базу данных мне нужно показать пользователю, что данные, которые он только что отправил, были успешно вставлены.

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

вещь, чтобы рассмотреть следующие вопросы:

1. После вызова Ajax Я делаю вызов функции на ту же страницу, чтобы обновить его, потому что если нет, то страница никогда не делает.
2. У меня есть <div> в этой форме html, которая скрыта, чтобы просто показать себя после ответа сервера.

Поэтому у меня есть два вопроса:

1. Прежде всего, как я это делаю, есть ли какой-нибудь лучше?
2. Возможно ли сделать сообщение постоянным после обновления страницы?

Я оставляю часть кода JS (чтобы сделать его коротким, так как все работает просто отлично), и HTML часть, которая содержит DIV здесь:

$('#MiForm').on('submit', function(event) 
{ 
    //Creating the necessary instances and data 
    //Here is where I put different messages for the div "alert" 

    xhttp.onreadystatechange = function() 
    { //Response from the server. 
     if (xhttp.readyState < 4) 
     {// Waiting response from server. 
      document.getElementById('Alert').hidden = false;  
      document.getElementById('Alert').innerHTML = "Sending Request..."; 
     } 
     else if (xhttp.readyState === 4) 
     {// 4 = Response from server has been loaded 
      if (xhttp.status == 200 && xhttp.status < 300) // (200-299) is succesful. 
      document.getElementById('Alerta').innerHTML = 'Everything OK!'; 
     } 
    }; 
    //the Send function and data. 

    event.preventDefault(); //-->preventing the submit of the normal form cause I use AJAX. 

    window.location.href = '../Ui/WorkerForm.php' //--->this is where I load the same page where Im on, but it seems that it does it too fast. 
    }); 

И в HTML:

<div id="Alert" class="alert alert-success" hidden="true" role="alert"></div> 

Еще одна вещь, страница php, на которую я отправляю данные, не возвращает никакого значения вручную, она просто получает данные и вызывает классы для вставки.

Answer 1

Прежде всего, вы обновляете страницу, как только отправляете AJAX. Вы должны переместить команду обновления внутри прослушивателя функции onreadystatechange, поэтому это происходит после завершения AJAX и ответа.

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

setTimeout(function(){window.location.href = '../Ui/WorkerForm.php';}, TIMEOUT_IN_MILISECONDS);