PostgreSQL数据无法绑定到HTML表格列的问题求助

我尝试使用Ajax和PHP将PostgreSQL中的数据展示到HTML表格中，但获取到的数据并未绑定到HTML表格的列元素，仅返回了JSON字符串。请问如何将id、employee_name、employee_salary和employee_age字段绑定到HTML表格的<td>元素？

以下是现有代码：

HTML #

<div class="col-sm-6" style="padding-top:50px;">
    <table id="employee_grid" class="table" width="100%" cellspacing="0">
        <thead>
            <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Salary</th>
            <th>Age</th>
            </tr>
        </thead>
        <tbody id="emp_body">
        </tbody>
    </table>
</div>

Ajax（绑定表格列元素） #

$(document).ready(function(){
    /* Handling get employee */
    function get_employee() {
      $.ajax({        
        type : 'GET',
        url  : 'response.php?action=list',
        success : function(response){
          response = JSON.parse(response);
            var tr;
                $('#emp_body').html('');
                $.each(response, function( index, emp ) {
                tr = $('');
                    tr.append("" + emp.id + "");
                    tr.append("" + emp.employee_name + "");
                    tr.append("" + emp.employee_salary + "");
                    tr.append("" + emp.employee_age + "");

                    var action = 
                    "<div class='btn-group' data-toggle='buttons'>";
                    action += "<a href='#' target='_blank' class='btn btn-warning btn-xs' data-toggle='modal' data-target='#edit_model'>Edit</a>";
                    action += "<a href='#' target='_blank' class='btn btn-danger btn-xs'>Delete</a></div>";
                    tr.append(action);
                    $('#emp_body').append(tr);
            });
        }
      });
    }
    
    //initialize method on load
    function init() {
        get_employee();
    }
    init();
});

PHP（从PostgreSQL查询数据） #

<?php
include("connection.php");
 
$params = $_REQUEST;
$action = isset($params['action']);
$params['action'] !='' ? $params['action'] : 'list';
$empCls = new Employee();
 
switch($action) {
    case 'list':
        $empCls->getEmployees();
    break;
    default:
    return;
}

class Employee {
    protected $conn;
    protected $data = array();
    function __construct() {

    $db = new dbObj();
    $connString =  $db->getConnstring();
        $this->conn = $connString;
    }
    
    function getEmployees() {
        $sql = "SELECT * FROM employee";
        $queryRecords = pg_query($this->conn, $sql) or die("error to fetch employees data");
        $data = pg_fetch_all($queryRecords);
        echo json_encode($data);
    }
}
?>

1. 修正Ajax代码中的表格元素创建逻辑 #

现有Ajax代码未正确创建表格行和单元格，导致数据无法渲染到表格。修改后的代码如下：

$(document).ready(function(){
    /* Handling get employee */
    function get_employee() {
      $.ajax({        
        type : 'GET',
        url  : 'response.php?action=list',
        dataType: 'json', // 让jQuery自动解析JSON，无需手动调用JSON.parse
        success : function(response){
            $('#emp_body').html('');
            $.each(response, function( index, emp ) {
                // 创建<tr>元素
                let tr = $('<tr>');
                // 为每个字段创建<td>单元格并添加到行中
                tr.append(`<td>${emp.id}</td>`);
                tr.append(`<td>${emp.employee_name}</td>`);
                tr.append(`<td>${emp.employee_salary}</td>`);
                tr.append(`<td>${emp.employee_age}</td>`);

                // 添加操作按钮列（同样包裹在<td>中保证表格结构完整）
                let action = `
                <div class='btn-group' data-toggle='buttons'>
                    <a href='#' class='btn btn-warning btn-xs' data-toggle='modal' data-target='#edit_model'>Edit</a>
                    <a href='#' class='btn btn-danger btn-xs'>Delete</a>
                </div>`;
                tr.append(`<td>${action}</td>`);
                // 将组装好的行添加到tbody
                $('#emp_body').append(tr);
            });
        }
      });
    }
    
    //initialize method on load
    function init() {
        get_employee();
    }
    init();
});

2. 修正PHP代码中的action判断逻辑 #

现有PHP代码中$action变量赋值错误，导致无法正确触发数据查询分支。修改后的代码如下：

<?php
include("connection.php");
 
$params = $_REQUEST;
// 正确获取action参数，默认值设为'list'
$action = isset($params['action']) && !empty($params['action']) ? $params['action'] : 'list';
$empCls = new Employee();
 
switch($action) {
    case 'list':
        $empCls->getEmployees();
    break;
    default:
    return;
}

class Employee {
    protected $conn;
    protected $data = array();
    function __construct() {
        $db = new dbObj();
        $connString =  $db->getConnstring();
        $this->conn = $connString;
    }
    
    function getEmployees() {
        $sql = "SELECT * FROM employee";
        $queryRecords = pg_query($this->conn, $sql) or die("error to fetch employees data");
        $data = pg_fetch_all($queryRecords);
        // 设置响应头为JSON格式，明确告知前端响应类型
        header('Content-Type: application/json');
        echo json_encode($data);
    }
}
?>

关键修复点说明 #

• Ajax部分：

  • 用$('<tr>')正确创建表格行元素，原代码tr = $('')创建的是空对象
  • 每个字段都用<td>标签包裹后再添加到行中，确保数据能显示在表格单元格内
  • 添加dataType: 'json'配置，让jQuery自动解析JSON响应，省去手动JSON.parse步骤
  • 操作按钮也包裹在<td>中，保证表格结构的完整性

• PHP部分：

  • 修正$action变量的赋值逻辑，确保list分支能被正确触发
  • 添加header('Content-Type: application/json')，明确响应的MIME类型，避免前端解析异常

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