如何将API返回的URL响应数据追加至指定HTML表格？

我已经通过API调用获取了来自Excel文件的URL响应数据，现在需要把这些数据展示在HTML表格里。以下是我的代码：

我的index.html代码 #

<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
    <title></title> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 
    <link href="css/main.css" rel="stylesheet"> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
</head> 
<body> 
    <nav class="navbar navbar-header navbar-brand" role="navigation"> 
        <div class="container"> 
            <a class="navbar-logo"><img alt="Brand" src="images/logo.jpg" height=50px></a> 
            <a class="navbar-brand" href="index.html" style="color: white; font-size: 12"> ABC </a> 
            <div class="navbar-header navbar-right"> 
                <ul class="nav nav-tabs"> 
                    <li role="presentation" class="active"><a href="index.html">Table1</a></li> 
                    <li role="presentation"> 
                        <a href="table2.html" style="color: white">Table2</a> 
                    </li> 
                </ul> 
            </div> 
        </div> 
    </nav> 
    <!-- table for important telephone extensions --> 
    <table id="AjaxGetTable1ID" class="table-responsive container table table-hover table-bordered table-allignment" style="width:35%; padding-bottom:10px; margin-right: 15.5%"> 
        <tbody id="tableBody"> <!-- 给tbody加个ID方便精准操作 -->
            <tr style="width:3%"> 
                <th style="width:60%">Employee</th> 
                <th style="width:22%">Extension Code</th> 
            </tr> 
        </tbody> 
    </table> 
    <div class="wrap"> 
        <form id="someform"> 
            <input type="text" id='getNameOfEmployeeID' class="searchTerm" placeholder="Employee Name" name="employeeNamePassToURL"> 
            <button type="submit" onclick='displayEmployee(event)' class="searchButton" id="submitid"> 
                <i class="fa fa-search"></i> 
            </button> 
        </form> 
    </div> 
    <p id="demo"></p> 
    <p id="demo2"></p> 
    <p id="myID"></p> 
    <p id="displayResult" style="width:35%; padding-bottom:10px; margin-left: 17%; margin-top: 5%"></p> 
    <script src="js/jquery-3.2.1.min.js"></script> 
    <script src="js/bootstrap.min.js"></script> 
    <script src="js/main.js"></script> 
    <!-- <script src = "js/table1.js"></script> --> 
</body> 
</html>

我的JavaScript代码（已能获取URL响应） #

try { 
    AjaxGetTable1 = function(url, storageLocationTable1, mySuccessCallback) { 
        var result = $.ajax({ 
            type: "GET", 
            url: 'http://localhost:8080/importantExtensions', 
            param: '{}', 
            contentType: "application/json", 
            dataType: "json", 
            success: function(tableData) { 
                storageLocation = ['data']; 
                var length = Object.keys(storageLocation).length; 
                $.each(storageLocation, function(index, value) { 
                    var display = value.empName + value.extCode; 
                    $("#someform #someLabel" + index).val(value.empName); 
                }); 
            } 
        }).responseText; 
        return storageLocationTable1; 
    } 
} catch (e) { 
    document.getElementById("AjaxGetTable1").innerHTML = e.message; 
}

请提供将URL响应数据追加至上述HTML表格的可行方案。

我注意到你现有JS代码里的核心问题：没有正确关联API返回的tableData，也没有针对表格做数据渲染逻辑。下面是修正后的完整可行方案：

1. 替换你的JavaScript代码 #

把原有的JS代码换成以下内容，我会逐段解释关键逻辑：

// 封装获取并渲染表格数据的核心函数
function loadTableData(filterName = "") {
    try {
        $.ajax({
            type: "GET",
            url: 'http://localhost:8080/importantExtensions',
            // 如果后端支持按姓名过滤，这里传递搜索参数；不需要的话可以删掉这行
            data: filterName ? { employeeName: filterName } : {},
            contentType: "application/json",
            dataType: "json",
            success: function(tableData) {
                // 先清空表格现有数据（保留表头行）
                const $tableBody = $("#tableBody");
                $tableBody.find("tr:not(:first)").remove();

                // 遍历API返回的员工数据，动态生成表格行
                $.each(tableData, function(index, employee) {
                    // 如果API返回包含表头行，这里跳过（根据实际返回结构调整）
                    if (index === 0) return;

                    // 创建新的表格行
                    const $row = $("<tr></tr>");
                    // 填充员工姓名单元格（加N/A处理空值）
                    $row.append(`<td>${employee.empName || 'N/A'}</td>`);
                    // 填充分机号单元格
                    $row.append(`<td>${employee.extCode || 'N/A'}</td>`);
                    // 将行追加到表格主体
                    $tableBody.append($row);
                });
            },
            error: function(xhr, status, error) {
                // 请求失败时显示错误信息
                $("#displayResult").text(`加载数据失败: ${error}`);
            }
        });
    } catch (e) {
        // 捕获代码执行异常
        $("#displayResult").text(`发生错误: ${e.message}`);
    }
}

// 处理搜索表单的提交事件
function displayEmployee(e) {
    // 阻止表单默认跳转行为
    e.preventDefault();
    // 获取输入的员工姓名并去除空格
    const employeeName = $("#getNameOfEmployeeID").val().trim();
    // 调用加载表格数据的函数，传入搜索关键词
    loadTableData(employeeName);
}

// 页面加载完成后自动加载全量数据
$(document).ready(function() {
    loadTableData();
});

关键逻辑说明 #

• loadTableData函数：负责发起Ajax请求，拿到数据后先清空表格旧数据，再遍历数据生成新行，确保每次加载都是最新数据。
• 空值处理：用|| 'N/A'处理字段为空的情况，避免表格显示空白。
• 搜索功能：displayEmployee函数阻止表单默认提交，获取输入的关键词后传递给loadTableData，实现搜索过滤。如果后端不支持过滤，可以在success回调里添加前端过滤逻辑：

  // 前端过滤示例：只保留包含搜索关键词的员工
  const filteredData = tableData.filter(emp => 
      emp.empName.toLowerCase().includes(filterName.toLowerCase())
  );
  // 后续遍历filteredData生成表格行即可
  

• 错误处理：添加了error回调和try-catch，方便排查请求或渲染时的问题，错误信息会显示在页面的displayResult元素里。

注意事项 #

• 确认API返回的tableData是数组结构，且每个元素包含empName和extCode字段（如果字段名不同，需要对应修改JS里的字段名）。
• 如果你不需要搜索功能，可以删掉displayEmployee函数和表单相关的参数传递逻辑。

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