如何提取AJAX返回的HTML表格数据并存入JavaScript变量

你现有代码的常见问题 #

• 数据流转路径绕远：当前逻辑是把数据库数据先拼成HTML表格塞到DOM里，之后再反过来从DOM单元格里扒数据，既容易因为页面结构变动出错，也不符合JS读数据的常规逻辑
• 代码存在语法错误：document.getElementById('#responsecontainer') 写法不合法，getElementById 方法直接匹配元素ID值，不需要加jQuery选择器用的#前缀，这么写会找不到对应元素，直接触发空值报错
• 接口返回格式不对：AJAX当前声明接收HTML格式内容，没法直接把后端返回的数据库内容存成JS变量

可落地的简化实现逻辑 #

完全不需要走“DOM中转数据”的弯路，核心靠JSON格式完成前后端数据传递：

1. 改造后端PHP接口
   不要在GetOccupancy.php里直接输出拼接好的HTML代码，改成输出结构化JSON格式——JSON是JavaScript原生支持的格式，返回后可以直接存入JS变量。
   参考写法：

   // GetOccupancy.php 核心逻辑
   header('Content-Type: application/json'); // 声明返回内容格式
   // 假设已经完成数据库查询，拿到的结果存在$occupancyResult数组中
   echo json_encode([
       'occupancy_data' => $occupancyResult
   ]);
   

2. 改造前端AJAX逻辑
   把AJAX的返回格式声明从html改成json，拿到响应后直接赋值给JS变量，需要展示内容时再用变量里的数据生成页面元素：

   // 提前声明JS变量，用来存储从数据库取回的数据
   let dbStoredData = null;
   
   $(document).ready(function() {
       $("#display").click(function() {
           $.ajax({
               type: "GET",
               url: "GetOccupancy.php",
               dataType: "json", // 声明接收JSON格式内容
               success: function(response) {
                   // 直接把数据库返回的内容存入JS变量，不需要依赖DOM
                   dbStoredData = response.occupancy_data;
   
                   // 如果需要在页面展示数据，再用变量里的内容生成表格塞到容器中
                   let renderTable = '<table>';
                   dbStoredData.forEach(row => {
                       renderTable += `<tr><td>${row.字段1}</td><td>${row.字段2}</td></tr>`
                   })
                   renderTable += '</table>';
                   $("#responsecontainer").html(renderTable);
               }
           });
       });
   });
   

如果你坚持用“读DOM单元格”的旧逻辑 #

只需要修掉原函数的语法问题，注意等AJAX内容加载完成后再调用即可：

function GetCellValues() {
    // 去掉ID前的#号
    var table = document.getElementById('responsecontainer');
    // 增加空值判断，避免容器没加载时报错
    if (!table) return;
    for (var r = 0, n = table.rows.length; r < n; r++) {
        for (var c = 0, m = table.rows[r].cells.length; c < m; c++) {
            alert(table.rows[r].cells[c].innerHTML);
        }
    }
}

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