Как вставить значения в массив с помощью ответа AJAX?

Question

Когда я загружаю свою страницу, я пытаюсь вставить значения из моей базы данных в массив JS, используя AJAX, и после этого получить случайное значение.

var arrayen = [];
$.ajax({
	type: 'POST',
	url: 'getEnglishWords.php',
	success: function(words){
		words = JSON.parse(words);
		for(var i = 0; i < 50; i++) {
			arrayen.push(words[i].en);
		}
	},error: (error) => {
		 console.log(JSON.stringify(error));
	}
});

console.log(arrayen.length);

Когда я запускаю страницу, она вставляет значения в массив (я проверил в консоли Chrome), но - console.log, который я добавил в нижнем выводе 0. Она выглядит как console.log, запускаемая до AJAX. запустить и делает проблему.

Редактировать: Я пытаюсь разбить arrayen[12] на собственный массив. это означает, что каждый символ должен быть в строке массива. поэтому я делаю это:

console.log(arrayen);
var array = arrayen[12].split('');

Результаты:

и я получил ошибку: Cannot read property 'split' of undefined

Answer 1

использовать каждую функцию библиотеки jquery.

$.each(words, function(index, value) {
    arrayen.push(value);
});

Answer 2

var arrayen = [];
$.ajax({
    type: 'POST',
    url: 'getEnglishWords.php',
    success: function(words){
        words = JSON.parse(words);
        for(var i = 0; i < 50; i++) {
            arrayen.push(words[i].en);
        }
    findArrayLength(arrayen);
    },error: (error) => {
         console.log(JSON.stringify(error));
    }
});

function findArrayLength(x) {
console.log(x.length);
}

AJAX является асинхронным и не блокирует браузер. Если вы запускаете Ajax-запрос, пользователь все еще может работать, пока запрос ожидает ответа. Когда сервер возвращает ответ, выполняется обратный вызов для его обработки.

Вы можете сделать XMLHttpRequest синхронным, если хотите, и если вы это сделаете, браузер блокируется, пока запрос не выполнен (поэтому большую часть времени это неуместно)

Answer 3

Это происходит потому, что вы используете asynchronous function, что $.ajax(). Вот почему ваш оператор console.log(arrayen.length) выполняется первым, а затем вы получаете данные.

Для запуска вашей программы добавьте console statement внутрь success callback. Он убедится, что длина будет напечатана, как только вы получите данные с сервера.

Что такое AJAX?

Answer 4

Функция успеха в ajax - это функция, запускаемая при успешном выполнении запроса.Поэтому, если вы хотите, чтобы в журнале были результаты вашего успеха, поместите console.log в функцию успеха следующим образом:

$.ajax({
type: 'POST',
url: 'getEnglishWords.php',
success: function(words){
    words = JSON.parse(words);
    for(var i = 0; i < 50; i++) {
        arrayen.push(words[i].en);
    }
    console.log(arrayen.length);

},error: (error) => {
     console.log(JSON.stringify(error));
}
});

Answer 5

Положите console.log(arrayen.length); внутрь, как показано ниже.

    var arrayen = [];
    $.ajax({
        type: 'POST',
        url: 'getEnglishWords.php',
        success: function(words){
            words = JSON.parse(words);
            for(var i = 0; i < 50; i++) {
                arrayen.push(words[i].en);
            }
        },error: (error) => {
             console.log(JSON.stringify(error));
        }
    }).done(function(results) {
        console.log("done : " + arrayen.length);           
});