点击按钮Ajax获取MySQL数据渲染DataTable tbody异常排查

核心问题点 #

• PHP后端函数作用域错误：filtersearch()函数内调用$conn变量时没有声明全局作用域，数据库连接变量未定义，SQL查询直接失败；同时函数内重复引入数据库配置文件、文件开头多余执行了一次全表查询，会产生多余输出污染JSON响应，导致前端Ajax解析JSON失败。
• 前端Ajax缺少错误回调：接口报错、JSON格式非法时没有任何提示，只会静默失败，无法定位问题。
• DataTable销毁逻辑不严谨：页面首次加载时如果还没初始化过DataTable实例，直接调用.destroy()会抛出JS错误，中断后续渲染逻辑。
• 多余语法符号：Ajax请求代码块末尾多写了一个})，会触发JS语法错误。

修正后代码 #

1. PHP后端代码 #

移除重复查询和重复配置引入，修复作用域问题，返回JSON前清空缓冲区避免多余输出：

<?php
include 'include/dbconfig.php';
$formula = '';
if (isset($_POST['formula'])) {
    $formula = $_POST['formula'];
}

switch ($formula) {
    case 'filtersearch':
        $supData = array();
        // 直接使用全局数据库连接执行查询，移除冗余的filtersearch函数
        $result = mysqli_query($conn, "SELECT * FROM tbl_assets");
        while ($row = $result->fetch_assoc()) {
            $supData[] = $row;
        }
        // 清空之前的意外输出，设置JSON响应头
        ob_clean();
        header('Content-Type: application/json');
        echo json_encode($supData);
        exit;
    default:
        break;
}
?>

2. 前端Ajax请求代码 #

移除多余闭合符号，添加错误回调：

$(document).on('click','#filtersearch',function(e){
    e.preventDefault();
            
    $.ajax({
        url:"index.php",
        method:"POST",
        data:{
            formula:"filtersearch"
        },
        dataType:"json",
        beforeSend:()=>{
            $('.load_spinner').removeClass('d-none');
        },
        success:function(res){
            $('.load_spinner').addClass('d-none');
            select_d = res;
            console.log(res);
            
            var str ="";
            if (res && res.length > 0) {
                res.forEach((x)=>{     
                    str += `<tr>
                                <td>${x.assetid}</td>
                                <td>${x.assetcode}</td>
                                <td>${x.assetserial}</td>
                                <td>${x.assetname}</td>
                                <td>${x.assettype}</td>
                                <td>${x.assetcat}</td>
                                <td>${x.dpurchased}</td>
                                <td>${x.price}</td>
                                <td>${x.dperiod}</td>
                                <td>${x.finprice}</td>
                                <td>${x.status}</td>
                                <td>${x.assetage}</td>
                                <td>${x.location}</td>
                            </tr>`;
                })
            }         
            data_table("#table_index","#tbody_index",str);
        },
        error: function(xhr, textStatus, errorThrown) {
            $('.load_spinner').addClass('d-none');
            console.log('请求错误：', xhr.responseText, errorThrown);
            alert('数据加载失败，请打开浏览器控制台查看具体报错');
        }
    })

3. DataTable渲染函数 #

增加实例存在判断，避免首次初始化报错：

function data_table(table_name,tbody_name,data_tbody) {
    // 仅当DataTable已初始化时才执行销毁
    if ($.fn.DataTable.isDataTable(table_name)) {
        $(table_name).DataTable().destroy();
    }
    $(tbody_name).empty().html(data_tbody);
    $(table_name).DataTable();
}

验证步骤 #

1. 点击查询按钮后打开浏览器控制台的Network面板，找到index.php请求，查看响应内容是否为纯JSON数组，不能夹杂PHP警告、HTML标签等多余内容。
2. 查看控制台Console面板，确认没有JS语法错误、DataTable列数不匹配错误。
3. 如果数据字段包含尖括号、单引号等特殊字符，建议对字段值做HTML转义后再拼接字符串，避免DOM结构错乱。

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