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
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.