Ошибка у тебя в том, что Ajax-запрос выполняется асинхронно.
Тоесть функция getName вернёт управление в вызывающую функцию ещё до того, как даже будет вызван твой onload.
+ по хорошему onload нужно устанавливать ещё до отправки.
Это раз.
А два - return твой возвращает управление в момент вызова onload, а по тому просто некому будет на той стороне прочитать полученные данные.
Решения два:
1. Использовать промисы. Например так:
function getName(user_id) {
return new Promise(function(resolve) {
// data
var data = {}
data.user_id = user_id
data = JSON.stringify(data)
// send
const request = new XMLHttpRequest();
request.open("POST", "/test-ajax/");
request.send(data);
request.onload = function() {
var name = JSON.parse(this.response)
resolve(name);
}
});
}
// Дальше работаем через then
getName(user_id).then(data=>console.log(data));
// Или async/await
const name = await getName(user_id);
В этом примере мы сразу возвращаем объект-промис, который будет завершён внутри onload. А дальше можно с ним работать через async-await или then с коллбэком.
2. Использовать коллбэки (по старинке):
function getName(user_id, callback) {
// data
var data = {}
data.user_id = user_id
data = JSON.stringify(data)
// send
const request = new XMLHttpRequest();
request.open("POST", "/test-ajax/");
request.send(data);
// get
request.onload = function() {
var name = JSON.parse(this.response)
callback(name)
}
}
var onNameLoaded = function(name) {
console.log(name)
};
getName(user_id, onNameLoaded);
В этом примере мы передаём в функцию getName другую функцию, которая должна быть вызвана после загрузки данных.
3. Использовать fetch и async/await - мы же в 2022 году живём. (@Mi11er)
async function getName(userId) {
const response = await fetch("/test-ajax/", {
method: "POST",
body: JSON.stringify({"user_id": userId})
})
return await response.json();
}
const name = await getName(userId);
