将MySQL表元素存入JS数组 解决AJAX外部读数组长度为0问题

你遇到的异常来自两个核心点，和你写的for循环push逻辑本身无关：

• AJAX异步执行机制：调用ajaxRequest发送请求时，JS不会阻塞等待接口返回，会直接执行后续的同步代码。你在请求调用的外部位置打印availableQuestions.length时，接口还未返回结果，传入的回调函数还没执行，数组还没被填充，因此输出长度为0。等接口返回200/201状态码后才会触发回调执行push操作，所以回调内部打印长度为2是符合预期的。
• 控制台引用类型的延迟求值特性：你观察到的「所有记录都被存入数组第一个元素」是调试错觉：当你在请求外部打印console.log(availableQuestions)时，控制台最初显示的是空数组，但控制台打印数组、对象这类引用类型时，不会保存打印瞬间的数值快照；等你手动点击展开控制台里的数组条目时，异步请求已经完成，数组已经被填充完毕，你看到的是更新后的内容，才会误判数组结构。只要后端返回的enigmeAll是平铺的记录数组，你的循环push逻辑得到的数组结构就是正确的，每个索引对应一条数据库记录。

所有依赖接口返回数据的逻辑，都不能直接写在ajaxRequest调用的同步代码位置，你可以选择以下两种方式处理：

方案1：直接在回调内执行后续逻辑 #

不需要额外写循环push，直接把解析后的数据赋值给数组即可，所有用到题目数据的逻辑都放在回调内部：

var availableQuestions = [];
ajaxRequest("GET","../controller.php?func=get_enigme", (enigme) => {
    const enigmeAll = JSON.parse(enigme);
    // 如果打印发现enigmeAll是二层嵌套结构，就改成 availableQuestions = enigmeAll[0]
    availableQuestions = enigmeAll;
    // 后续所有依赖availableQuestions的逻辑全写在这里
    console.log('数组填充完成，长度：', availableQuestions.length);
    console.log('第一条记录：', availableQuestions[0]);
});

function ajaxRequest(type,url,callback,data=""){
    let request = new XMLHttpRequest();
    request.open(type, url);
    request.onload = function () {
        switch (request.status){
            case 200:
            case 201:
                callback(request.responseText);
                break;
            default: console.log('请求错误，状态码：', request.status);
        }
    };
    request.send(data);
}

方案2：改写为Promise+async/await（避免回调嵌套，更易维护） #

把ajax请求封装为返回Promise的函数，就可以用同步写法处理异步逻辑，不需要把所有后续代码塞到回调里：

function ajaxRequest(type,url,data=""){
    return new Promise((resolve, reject) => {
        let request = new XMLHttpRequest();
        request.open(type, url);
        request.onload = function () {
            switch (request.status){
                case 200:
                case 201:
                    resolve(request.responseText);
                    break;
                default: 
                    reject(request.status);
            }
        };
        request.onerror = () => reject('网络连接异常');
        request.send(data);
    })
}

// 初始化题目数据
async function initQuestionList() {
    try {
        const enigmeRes = await ajaxRequest("GET","../controller.php?func=get_enigme");
        const enigmeAll = JSON.parse(enigmeRes);
        // 如果返回结构嵌套就取enigmeAll[0]
        const availableQuestions = enigmeAll;
        console.log('数组长度：', availableQuestions.length);
        // 后续渲染、交互逻辑直接在这里写即可
    } catch (err) {
        console.log('获取题目失败：', err);
    }
}

initQuestionList();

排查提示：如果回调内打印发现availableQuestions[0]仍然是数组，说明后端PHP接口返回的JSON本身是二层嵌套结构，直接取第一层的元素赋值即可，不需要循环遍历push。

内容的提问来源于stack exchange，提问作者chubby marschmallow