如何使用AJAX将MySQL数据渲染到文本框、下拉菜单及HTML表格

1. 修改后端ajaxload.php，返回结构化JSON数据 #

原来的后端仅返回表格HTML，无法同时给多个前端组件提供数据，需要改成返回JSON格式，把表格内容、文本框待填充值、下拉菜单选项都整合到返回结果里：

$myConn = mysqli_connect("localhost", "root", "", "test") or die("数据库连接失败");
$sqlQuery = "select * from students";
$result = mysqli_query($myConn, $sqlQuery) or die ("SQL执行失败");

$returnData = [
    'table_html' => '', // 存储原来的表格HTML
    'form_data' => [], // 存储待填充到文本框的单条学生数据
    'select_options' => [] // 存储下拉菜单需要的所有学生选项
];

if(mysqli_num_rows($result) > 0) {
    // 组装表格HTML逻辑保持不变
    $output = "
    <table border='2' cellpadding='5px' cellspacing='5px'>
    <tr>
        <th width='100px'>ID</th>
        <th>姓名</th>
        <th width='100px'>删除</th>
        <th width='100px'>编辑</th>
    </tr>";
    $allStudents = [];
    while($row = mysqli_fetch_assoc($result)){
        $allStudents[] = $row;
        $output .= "    
        <tr>
            <td>{$row['st_id']}</td>
            <td>{$row['st_first_name']} {$row['st_last_name']}</td>
            <td><button class='btn-delete' data-myid={$row['st_id']}>删除</button></td>
            <td><button class='btn-edit' data-myid={$row['st_id']}>编辑</button></td>
        </tr>"; 
    }
    $output .= "</table>";
    $returnData['table_html'] = $output;
    // 示例：默认取第一条学生数据填充文本框，可按需替换为指定ID的查询结果
    $returnData['form_data'] = $allStudents[0] ?? [];
    // 下拉菜单需要的全量学生数据
    $returnData['select_options'] = $allStudents;

    mysqli_close($myConn);
    // 输出JSON格式结果
    header('Content-Type: application/json');
    echo json_encode($returnData);
} else
{
    header('Content-Type: application/json');
    echo json_encode($returnData);
}

2. 修改前端逻辑，拆分处理不同组件的数据 #

首先在你的HTML表单中补充下拉菜单元素（已有可跳过）：

<!-- 加在addform表单内即可 -->
选择学生：<select id="st-select"></select><br>

修改AJAX代码，分别给表格、文本框、下拉菜单赋值：

$("document").ready(function(){
    // 存储全量学生数据方便后续编辑使用
    let allStuData = [];
    function loadData(){
        $.ajax({
            url: "ajaxload.php",
            type: "post",
            dataType: "json", // 声明预期返回JSON格式
            success: function(data){
                allStuData = data.select_options || [];
                // 1. 填充表格
                $("#table-data").html(data.table_html);
                // 2. 填充文本框，不需要默认填充可以删掉这段
                if(data.form_data) {
                    $("#st-first-name").val(data.form_data.st_first_name);
                    $("#st-last-name").val(data.form_data.st_last_name);
                }
                // 3. 填充下拉菜单
                let selectEl = $("#st-select");
                selectEl.empty(); // 先清空原有选项
                $.each(allStuData, function(index, item){
                    selectEl.append(`<option value="${item.st_id}">${item.st_first_name} ${item.st_last_name}</option>`);
                });
            }        
        }); 
    }
    // 页面加载完成主动拉取一次数据
    loadData();

    // 可选功能：点击编辑按钮填充对应行数据到文本框和下拉菜单
    $(document).on('click', '.btn-edit', function(){
        let stuId = $(this).data('myid');
        let targetStu = allStuData.find(item => item.st_id == stuId);
        if(targetStu) {
            $("#st-first-name").val(targetStu.st_first_name);
            $("#st-last-name").val(targetStu.st_last_name);
            $("#st-select").val(stuId);
        }
    });
});

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