You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

编辑客户页面AJAX请求返回控制器脚本而非JSON问题排查

问题描述

在编辑客户页面实现AJAX联动下拉功能,预期选择部门后自动加载对应市镇选项,但AJAX请求返回的不是预期的JSON数据,而是edit-clientController中的完整JavaScript脚本,导致无法解析更新下拉框。


相关代码

edit-clientController 代码

<?php
if ($_SESSION['user']['ordenes'] == 1) {
  if (count($_POST) > 0) {
    if (isset($_POST['nombres']) && isset($_POST['apellidos']) && isset($_POST['direccion']) && isset($_POST['telefono']) && isset($_POST['nit']) && isset($_POST['genero']) && isset($_POST['correo'])) {
      $nombres = trim(strtoupper($_POST['nombres']));
      $apellidos = trim(strtoupper($_POST['apellidos']));
      $direccion = trim($_POST['direccion']);
      $telefono = trim($_POST['telefono']);
      $nit = trim($_POST['nit']);
      $genero = $_POST['genero'];
      $correo = trim($_POST['correo']);
      if ($nit == '') {
        $nit = NULL;
      }
      if ($nombres == '' || $apellidos == '') {
        echo '<div class="alert alert-danger alert-dismissable">
                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true"><i class="fa fa-times-circle-o"></i></button>
                        <b>Error:</b> Rellene todos los campos.
                    </div>';
        exit;
      } else {
        require_once 'models/clienteModel.php';
        $e = new Cliente();
        $update = $e->updateCliente($idItem, $nombres, $apellidos, $nit, $telefono, $direccion, $correo, $genero);
        $e = null;

        if ($update == true) {
          echo '
                    <script>
                        $(location).attr("href","' . BASE_DIR . 'editar-cliente/' . $idItem . '-' . slug($nombres) . '/update");
                    </script>
                ';
        } else {
          echo '<div class="alert alert-danger alert-dismissable">
                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true"><i class="fa fa-times-circle-o"></i></button>
                        <b>Error:</b> No se pudo actualizar el registro, recarge la página e inténtelo nuevamente.
                    </div>';
        }
      }
    }
  } else {
    require_once 'models/clienteModel.php';
    $c = new Cliente();
    $cliente = $c->getCliente($idItem);
    $c = null;

    $c = new Cliente();
    $tipos = $c->getTipos();
    $c = null;

    $c = new Cliente();
    $departamento = $c->getDepartamentos();
    $c = null;

    if (count($cliente) > 0) {
      require_once 'views/header.php';
      require_once 'views/clientes-editar.php';
      require_once 'views/footer.php';
    }
  }
} else {
  require_once 'views/404.php';
}
?>

<script>
  var selectElement = document.getElementById("departamentos");
  var lastSearchTerm = "";

  var selectedMun = $("municipio").val();

  function loadMunicipios() {
    var selectedDepartamento = $("#departamento").val();

    if (selectedDepartamento !== lastSearchTerm) {
      lastSearchTerm = selectedDepartamento;

      $("#municipios").prop("disabled", true).attr("placeholder", "Cargando...");
      $.ajax({
        url: 'ClientesEditarMunicipios',
        type: "POST",
        data: {
          finca: selectedDepartamento
        }
      }).done(function(response) {
        updateMunicipiosDropdown(response);
        console.log(response);

        $("#municipio").prop("disabled", false).attr("placeholder", "Municipio");
      }).fail(function(jqXHR, textStatus, errorThrown) {
        console.error("Error en la llamada AJAX:", textStatus, errorThrown);
        console.log("Respuesta del servidor:", jqXHR.responseText);
      });
    }
  }

  function updateMunicipiosDropdown(municipiosList) {
    if (municipiosList) {
      try {
        var parsedData = JSON.parse(municipiosList);

        if (parsedData.success && parsedData.data.length > 0) {
          var municipios = parsedData.data;

          $("#municipio").empty();

          for (var i = 0; i < municipios.length; i++) {
            var idGenerico = municipios[i]["ID_GENERICO"];
            var nombre = municipios[i]["NOMBRE"];

            $("#municipio").append($('<option>', {
              value: idGenerico,
              text: nombre
            }));
          }
        } else {
          console.error("La respuesta no contiene datos válidos.");
        }
      } catch (error) {
        console.error("Error al parsear la lista de municipios como JSON:", error);
      }
    } else {
      console.error("La lista de municipios no está definida o está vacía.");
    }
  }

  $("#departamento").on("change", function() {
    loadMunicipios();
  });
</script>

ClientesEditarMunicipios 代码

<?php
date_default_timezone_set('America/Guatemala');

if (isset($_POST['finca'])) {
    $buscar = $_POST['finca'];
    require_once 'models/clienteModel.php';
    $p1 = new Cliente();
    $resultados = $p1->getMunicipios($buscar);
    $p1 = null;
    error_log(print_r($resultados));
    header('Content-Type: application/json');
    echo json_encode($resultados);
    exit;
}
?>

原因分析
  1. AJAX路径错误:前端AJAX使用相对路径'ClientesEditarMunicipios',可能未指向目标脚本,反而被路由到edit-clientController,导致返回控制器输出的HTML和JS代码。
  2. 路由规则冲突:若项目使用路由系统,未正确配置ClientesEditarMunicipios的路由规则,请求被转发至编辑客户控制器。
  3. 输出污染(次要):若ClientesEditarMunicipios脚本存在隐性输出(如空格、BOM头),会破坏JSON格式,但当前返回控制器JS,核心问题仍为路径/路由错误。

解决方案

1. 修正AJAX绝对路径

将AJAX请求的URL改为项目基础路径拼接的绝对路径,避免相对路径跳转错误:

$.ajax({
  url: '<?php echo BASE_DIR; ?>ClientesEditarMunicipios',
  type: "POST",
  data: {
    finca: selectedDepartamento
  }
  // 其余代码不变
});

2. 检查并配置路由规则

若项目使用路由框架,确保ClientesEditarMunicipios对应的路由已正确配置,指向处理AJAX请求的脚本,而非编辑客户控制器。

3. 清理目标脚本多余输出

在ClientesEditarMunicipios开头添加缓冲区清理代码,确保仅输出JSON数据:

<?php
ob_clean(); // 清除缓冲区多余输出
date_default_timezone_set('America/Guatemala');

if (isset($_POST['finca'])) {
    $buscar = $_POST['finca'];
    require_once 'models/clienteModel.php';
    $p1 = new Cliente();
    $resultados = $p1->getMunicipios($buscar);
    $p1 = null;
    error_log(print_r($resultados, true)); // 设第二个参数为true,避免直接输出
    header('Content-Type: application/json');
    echo json_encode($resultados);
    exit;
}
?>

4. 验证请求目标

在浏览器开发者工具网络标签中,查看AJAX请求的实际URL和响应内容,确认请求是否发送到ClientesEditarMunicipios脚本,若未命中则调整路径直至正确。


内容的提问来源于stack exchange,提问作者Carlos Andrés

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.28 09:14:57