Ajax获取MySQL查询结果后无法渲染到指定div的问题排查

开发者阿泽

2026-9-1

问题定位

你遇到的渲染空白问题核心是HTML结构非法导致的DOM解析异常，伴随几个明显的代码错误：

<option>标签使用场景完全错误：该标签仅能作为<select>/<optgroup>/<datalist>的子元素使用，直接放在<li>、<div>内部属于非法HTML结构。浏览器渲染时会自动修正DOM树，要么直接过滤非法节点，要么将节点移动到预期外的位置，直接导致事件绑定、值读取异常。
重复ID违规：循环输出的所有元素都写了固定id="hijo"，HTML规范要求页面内ID必须唯一，重复ID会引发DOM操作、事件绑定的不可预期问题。
属性滥用：href是<a>标签的专属属性，加在<option>上没有任何效果；脱离<select>父容器的<option>，调用jQuery的.val()方法本身就无法正确读取value属性值。
提供的代码片段中未看到foreach闭合、<li>闭合标签，如果实际代码中确实缺失闭合标签，会进一步加剧DOM结构错乱。

修复步骤

替换非法标签：将<option>替换为合法的可点击元素（推荐用<a>标签），移除重复ID，直接把参数值绑定到事件调用里，避免DOM读取值的异常。修正后的列表循环代码如下：

<?php foreach ($direc as $direccion) : ?>
<li class="list-group-item">
    <div class="row align-items-center no-gutters">
        <div class="col mr-2">
            <a class="d-block text-decoration-none" href="javascript:;" 
               onclick="realizaProceso('<?= htmlspecialchars($direccion['first_name'].' '.$direccion['last_name']) ?>');return false;">
                <h4 class="mb-0">
                    <strong><?= $direccion['first_name'] ?>&nbsp;<?= $direccion['last_name'] ?>, Zona--><?= $direccion['nombre_zona'] ?></strong>
                </h4>
            </a>
        </div>
        <div class="col-auto"></div>
    </div>
</li>
<?php endforeach; ?>

给AJAX请求增加错误回调，方便快速定位请求层面的异常：

function realizaProceso(padre) {
    var parametros = {
        "padre": padre
    };
    $.ajax({
        data: parametros,
        url: "<?php echo base_url() ?>Administracion/paneladminreddos",
        type: 'post',
        beforeSend: function() {
            $("#content").html("Procesando, espere por favor...");
        },
        success: function(response) {
            $("#content").html(response);
        },
        error: function(xhr) {
            $("#content").html("请求异常，状态码：" + xhr.status);
        }
    });
}

后续排查方向

如果修正上述问题后仍存在空白，打开浏览器F12开发者工具做针对性检查：

点击列表项时看Network面板是否正常发起POST请求：如果无请求，说明DOM结构仍有问题，事件未正常绑定
如果请求正常发出，查看接口返回的响应内容：如果响应为空，说明控制器层面没有正确加载视图并返回渲染结果（注意你在控制器里var_dump数据之后如果没有执行视图渲染逻辑，会导致返回内容只有var_dump的信息甚至空内容）
如果响应内容是正确的HTML片段，检查页面上id="content"的目标容器是否存在，有没有被其他JS逻辑覆盖清空。

内容的提问来源于stack exchange，提问作者Francisco José Gimeno Esteban