无法使用AJAX响应文本中的JSON数据，如何提取任务等字段？

你遇到的核心问题是PHP返回的响应不是合法的JSON格式——你的代码循环输出单个JSON对象，导致响应文本是多个独立JSON串拼接在一起（比如{"task":"r"...}{"task":"read"...}），这种格式无法被JSON.parse()正常解析。下面是分步解决方案：

1. 修复PHP代码：输出合法的JSON数组 #

不要循环逐个编码并输出任务对象，直接对整个任务数组执行一次json_encode()，这样返回的是标准的JSON数组：

if (mysqli_query($conn,$query)){
    $result = mysqli_query($conn,$query);
    $tasks = mysqli_fetch_all($result,MYSQLI_ASSOC);
    // 直接编码整个数组，返回一个合法的JSON数组
    echo json_encode($tasks);
    mysqli_free_result($result);
}

修改后，你的响应文本会变成：

[{"task":"r","category":"s","duration":"0"},{"task":"read","category":"s","duration":"10"},{"task":"read","category":"o","duration":"10"}]

这是可以被JavaScript正常解析的格式。

2. 修改JavaScript代码：解析JSON并提取数据 #

现在可以用JSON.parse()把响应文本转换成JavaScript数组，然后遍历数组提取每个任务的属性到变量中：

方案一：逐个处理每个任务的变量 #

get(url){
    let xhr = new XMLHttpRequest();
    xhr.open('GET',url,true)
    xhr.onload= function(){
        if (this.status===200){
            // 将响应文本解析为JS数组
            const tasksArray = JSON.parse(this.responseText);
            
            // 遍历每个任务，提取属性到变量
            tasksArray.forEach(task => {
                const taskName = task.task;
                const taskCategory = task.category;
                const taskDuration = task.duration;
                
                // 这里可以根据业务需求使用这些变量，比如打印、渲染到页面等
                console.log(`任务：${taskName}，分类：${taskCategory}，时长：${taskDuration}`);
            });
        }
    }
    xhr.send();
}

方案二：将同类型属性批量存入数组 #

如果需要把所有任务的task、category、duration分别存入独立的数组，可以这样做：

get(url){
    let xhr = new XMLHttpRequest();
    xhr.open('GET',url,true)
    xhr.onload= function(){
        if (this.status===200){
            const tasksArray = JSON.parse(this.responseText);
            
            // 初始化三个数组存储对应属性
            const allTasks = [];
            const allCategories = [];
            const allDurations = [];
            
            tasksArray.forEach(task => {
                allTasks.push(task.task);
                allCategories.push(task.category);
                allDurations.push(task.duration);
            });
            
            // 现在可以直接使用这三个数组
            console.log("所有任务名称：", allTasks);
            console.log("所有任务分类：", allCategories);
            console.log("所有任务时长：", allDurations);
        }
    }
    xhr.send();
}

这样就能顺利把响应中的task、category、duration提取到你需要的变量或数组里了。

内容的提问来源于stack exchange，提问作者Elon Musk