JavaScript работает только при вызове alert ()

Question

Я пытаюсь отправить запрос POST в метод Java, который создает учетную запись с данными параметрами формы в базе данных. Если учетная запись успешно создана, метод возвращает true, а затем я должен быть перенаправлен на ссылку. Но приведенный ниже код не будет работать, если только функция alert("") не существует.

Я предполагаю, что это как-то связано с асинхронным режимом, но я новичок в JavasScript и буду очень признателен за любую помощь:)

Вот код:

function createAccount(){

var xhr = new XMLHttpRequest();

var fname = document.getElementById("fname").value;
var surname = document.getElementById("surname").value;
var email = document.getElementById("email").value;
var password = document.getElementById("password").value;
var rpassword = document.getElementById("rpassword").value;
var emp_no = document.getElementById("emp_no").value;

xhr.open('POST','http://localhost:8080/di24_app/di24/create',true);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded; charset=UTF-8');
xhr.send('fname='+fname+'&surname='+surname+'&email='+email+'&password='+password+'&rpassword='+rpassword+'&emp_no='+emp_no);
xhr.onreadystatechange = function(){
    if(this.readyState == 4 && this.status == 200) {
        if(this.responseText == "false"){
            document.getElementById("result").innerHTML = "Error creating account!";
            document.getElementById("result").style.textAlign = "center";
        }
        else if(this.responseText == "true"){
            window.location.href = "http://localhost:8080/di24_app/html/home_page/home.html";
        }
    }

}
alert("");
}

Answer 1

Проблема в том, что у вас есть кнопка с типом = "submit", и onclick="createAccount()" находится внутри <form/>, браузер автоматически публикует данные и обновляет вашу страницу после нажатия этой кнопки, поэтому выполнение функция createAccount() никогда не достигнет конца.

На HTML-теге кнопки сделайте это: <button type ="submit" onclick="return createAccount()">Create</button> добавить return до createAccount()

В конце функции createAccount () добавьте return false.

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

function createAccount(){

....

xhr.onreadystatechange = function(){
    if(this.readyState == 4 && this.status == 200) {
        if(this.responseText == "false"){
            document.getElementById("result").innerHTML = "Error creating account!";
            document.getElementById("result").style.textAlign = "center";
        }
        else if(this.responseText == "true"){
            window.location.href = "http://localhost:8080/di24_app/html/home_page/home.html";
        }
    }

}
//alert("");
return false; // important
}

Answer 2

Вы можете использовать методы обратного вызова внутри вашей функции onreadystatechange, как показано ниже;

function createAccount(successCallback, errorCallback) {
   ...

   xhr.onreadystatechange = function(){
    if(this.readyState == 4 && this.status == 200) {
        if(this.responseText == "false"){
           errorCallback();
        }
        else if(this.responseText == "true"){
           successCallback();
        }
    }
  }
}

Затем вы можете вызвать метод createAccount с двумя параметрами ниже;

createAccount(
   function () { console.log('success') },
   function () { console.log('error') }
)

И вы можете записать свои коды манипуляций с dom в эти функции обратного вызова.