0

Tengo dos archivos para obtener los estados y ciudades del país, lo que estoy intentado hacer es que dependiendo del estado seleccionado, se coloquen las ciudades de ese estado, cada uno esta colocado en un SELECT->OPTION de HTML, ademas de que va a traves de peticiones AJAX desde el frontend, pero al ejecutar me da error:

Este es el código que ejecuta la peticion a la BD de los estados y los retorna como un JSON

<?php
namespace app\controllers;
use app\models\mainModel;

class ObtenerEstadosController extends mainModel{

    public function obtenerEstados(){
        // Consultar los estados
        $resultado = $this->ejecutarConsulta("SELECT id_estado, estado FROM estados");

        // Crear array asociativo con los estados
        $estados = [];
        while ($fila = $resultado->fetchAll()) {
        $estados[] = $fila;
        }

        // Convertir el array a JSON y enviarlo como respuesta
        echo json_encode($estados);
        }

}

Esta es la consulta que trae las ciudades, tiene como parametro usar la ciudad que es enviada desde el value del SELECT de estados

<?php
namespace app\controllers;
use app\models\mainModel;

class ObtenerCiudadesController extends mainModel{
    // Obtener el estado seleccionado
    public $estado = $_GET['estado'];
    public function obtenerCiudades($estado){
        // Consultar las ciudades del estado seleccionado
        $resultado = $this->ejecutarConsulta("SELECT id_ciudad, ciudad FROM ciudades WHERE id_estado = $estado");
        $ciudades = [];
        while ($fila = $resultado->fetchAll()) {
        $ciudades[] = $fila;
        }

        // Convertir el array a JSON y enviarlo como respuesta
        echo json_encode($ciudades);
    }

}

Y este es el código JS que ejecuta la peitición AJAX para cambiar los OPTION por los estados y en el caso de las ciudades es según el estado seleccionado

const estadoSelect = document.getElementById('estado');
const ciudadSelect = document.getElementById('ciudad');

function llenarSelectEstados(estados) {
    const estadoSelect = document.getElementById('estado');
    estadoSelect.innerHTML = ''; // Vaciar el select de estados
    estados.forEach(estado => {
        const option = document.createElement('option');
        option.value = estado.id_estado;
        option.textContent = estado.estado;
        estadoSelect.appendChild(option);
    });
}

function obtenerEstados() {
    const xhr = new XMLHttpRequest();
    const url = 'http://localhost/VENTAS/app/controllers/obtenerEstadosController.php';
    xhr.open('GET', `${url}`);
    xhr.onload = function() {
        if (xhr.status === 200) {
            const estados = JSON.parse(xhr.responseText);
            llenarSelectEstados(estados);
        } else {
            console.error('Error al obtener estados:', xhr.statusText);
        }
    };
    xhr.send();
}

// Al cargar la página
obtenerEstados();
estadoSelect.addEventListener('change', function() {
    const estadoSeleccionado = this.value;
    const url = 'http://localhost/VENTAS/app/controllers/obtenerCiudadesController.php';
    // Realizar solicitud AJAX para obtener ciudades del estado seleccionado
    const xhr = new XMLHttpRequest();
    xhr.open('GET', `${url}?estado=${estadoSeleccionado}`);
    xhr.onload = function() {
        if (xhr.status === 200) {
            const ciudades = JSON.parse(xhr.responseText);
            ciudadSelect.innerHTML = ''; // Vaciar el select de ciudades

            ciudades.forEach(ciudad => {
                const option = document.createElement('option');
                option.value = ciudad.id_ciudad;
                option.textContent = ciudad.ciudad;
                ciudadSelect.appendChild(option);
            });
        } else {
            console.error('Error al obtener ciudades:', xhr.statusText);
        }
    };
    xhr.send();
});


El problema es que al ejecutar en el formulario la consola me genera el error y no se que error tengo al enviar los datos como JSON:

Uncaught SyntaxError: Unexpected token '<', "<br />
<fo"... is not valid JSON
    at JSON.parse (<anonymous>)
    at xhr.onload (selector_est_ciu.js:21:34)
xhr.onload @ selector_est_ciu.js:21
load (async)
obtenerEstados @ selector_est_ciu.js:19
(anonymous) @ selector_est_ciu.js:31
5
  • 1
    Abre el enlace localhost/VENTAS/app/controllers/obtenerEstadosController.php en tu navegador y mira lo que te devuelve, a ver si ves código HTML en su respuesta en lugar de un json bien formado
    – masterguru
    Commented el 7 may. a las 4:54
  • 1
    Un clásico error y por tanto no es JSON válido. Ya te dijeron como puedes debuggear el código
    – OCHOA
    Commented el 7 may. a las 13:45
  • como te han dicho el problema radica en que el string o dato que recibe tu ajax no es un json valido, para debuggear esto debe remplazar: const ciudades = JSON.parse(xhr.responseText); por console.log(xhr.responseText) y valida que el texto tenga el formato json esperado, si lo vez y no entiendes que hay mal, te recomiendo editar y colocar que es lo que te sale en el post. Commented el 7 may. a las 15:30
  • Para poder ayudarte necesitamos ver el contenido de obtenerCiudadesController.php completo. En ese archivo está saliendo por pantalla algo que no es un JSON, que es lo que espera tu petición Ajax y por eso ocurre el error.
    – A. Cedano
    Commented el 7 may. a las 16:12
  • 1
    Muchas gracias, con la guía de la respuesta de @masterguru pude ir poco a poco avanzando y logre solucionar, tuve que reestructurar el código ya que en verdad no estaba devolviendo un JSON, pero lo pude hacer.
    – mnsperez97
    Commented el 8 may. a las 2:22

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.