Ajax funktioniert nicht richtig, wenn Anruf innerhalb einer Funktion

Question

Ich versuche, eine Javascript-Funktion, die ich habe die Ajax-Anfrage und es funktioniert nicht, weil es keine Antwort Text ist jedoch, wenn ich den Code außerhalb der Funktion ist klappt wunderbar. Jemand könnte bitte erklären, wie es funktioniert.

//This is here work properly. 
 
console.log("addPostmanUser"); 
 
var data = JSON.stringify({ 
 
    "email": "holahola@local.es", 
 
    "password": "12345", 
 
    "username": "holahola", 
 
    "name": "holahola", 
 
    "surname": "toledo", 
 
    "birthDate": 687045600000, 
 
    "enabled": true, 
 
    "authorities": [], 
 
    "groups": [], 
 
    "character": null, 
 
    "locale": null, 
 
    "registrationToken": null, 
 
    "facebookId": null, 
 
    "pushToken": null, 
 
    "termsDate": null 
 
}); 
 
var xhr = new XMLHttpRequest(); 
 
xhr.withCredentials = true; 
 
xhr.addEventListener("readystatechange", function(e) { 
 
    if (xhr.readyState === 4) { 
 
    console.log("addPostmanUser response: "); 
 
    console.log(xhr); 
 
    } 
 
}); 
 
xhr.open("POST", "http://IP/user", true); 
 
xhr.setRequestHeader("accept", "application/json"); 
 
xhr.setRequestHeader("content-type", "application/json"); 
 
xhr.setRequestHeader("cache-control", "no-cache"); 
 
xhr.send(data); 
 

 
//this one doesn't work 
 
function inSameFile() { 
 
    console.log("addPostmanUser"); 
 
    var data = JSON.stringify({ 
 
    "email": "holahola@local.es", 
 
    "password": "12345", 
 
    "username": "holahola", 
 
    "name": "holahola", 
 
    "surname": "toledo", 
 
    "birthDate": 687045600000, 
 
    "enabled": true, 
 
    "authorities": [], 
 
    "groups": [], 
 
    "character": null, 
 
    "locale": null, 
 
    "registrationToken": null, 
 
    "facebookId": null, 
 
    "pushToken": null, 
 
    "termsDate": null 
 
    }); 
 
    var xhr = new XMLHttpRequest(); 
 
    xhr.withCredentials = true; 
 
    xhr.addEventListener("readystatechange", function(e) { 
 
    if (xhr.readyState === 4) { 
 
     console.log("addPostmanUser response: "); 
 
     console.log(xhr); 
 
    } 
 
    }); 
 
    xhr.open("POST", "http://IP/user", true); 
 
    xhr.setRequestHeader("accept", "application/json"); 
 
    xhr.setRequestHeader("content-type", "application/json"); 
 
    xhr.setRequestHeader("cache-control", "no-cache"); 
 
    xhr.send(data); 
 
}

<link rel="stylesheet" href="https//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 

 
<form> 
 
    <div> 
 
    <a class="enter" href="" onClick="inSameFile();" id="btn_register">Registrarme</a> 
 
    <br> 
 
    <a class="enter" href="" id="btn_cancel">Cancelar</a> 
 
    <br> 
 
    </div> 
 
    <div></div> 
 
</form>

Answer 1

<a class="enter" href="" onClick="inSameFile();" id="btn_register" >Registrarme</a><br> 

Was, wenn Sie auf einen Link klicken, passiert dann?

1. Ein Klick-Ereignis ausgelöst
2. JavaScript verarbeitet alle Ereignisse auf sie
3. Der Browser die Seite im href (die aktuelle Seite in diesem Fall) angegeben lädt.

So eines von zwei Dingen wird hier geschehen:

Entweder die XHR Anfrage geht zu langsam geschehen, in welchem ​​Fall es abgebrochen wird, bevor es eine Antwort gibt, weil die Seite es Hosting wird Geh weg.

oder

Das XHR Objekt wird an der Konsole angemeldet sein, dann wird die neue Seite wird geladen. Das zerstört das XHR-Objekt (weil es auf einer Seite existiert, die zurückgelassen wurde) und macht es unmöglich, den Inhalt des XHR-Objekts zu überprüfen (obwohl die Zusammenfassung immer noch in der Konsole angezeigt wird, wenn die Protokollkonservierung aktiviert ist).

---

Wenn Sie etwas für Leute, dann JavaScript klicken auszulösen entweder die Mühe investieren in den Aufbau einer decent solution (mit Server-Fallbacks und der Verwendung von preventDefault wenn die JS erfolgreich ist) oder die schnelle nehmen und schmutzige Option, einen Knopf anstelle eines Links zu verwenden.