El día de hoy les traigo un tutorial sobre como usar AJAX para cambiar las opciones de un SELECT SELECT dependiendo de la opción seleccionada en el otro SELECT
¡ Bueno manos a la obra !
los archivos empleados para realizar este proyecto fueron los siguientes:
los archivos empleados para realizar este proyecto fueron los siguientes:
En la carpeta 'core' encontramos 2 archivos el archivo 'config,php' en el cual establecemos las variables para la conexin a la base de datos a continuación el archivo 'config.php'´
//Datos de configuracion de la base de datos
define('HOST', 'localhost');
define('USER', 'root');
define('PASSWORD', '');
define('DATABASE', 'countries');
Seguido de este archivo tenemos el archivo 'conexion.php', en este archivo usamos los datos de configuración del archivo 'config.php' para establecer la conexión a la base de datos.
require_once 'config.php';
class conexion
{
private $host;
private $user;
private $password;
private $database;
private $conexion;
/**
* conexion constructor.
*/
public function __construct()
{
$this->host = HOST;
$this->user = USER;
$this->password = PASSWORD;
$this->database = DATABASE;
$this->conexion = new mysqli($this->host, $this->user, $this->password, $this->database);
if($this->conexion->connect_errno){
echo "Lo sentimos, no se ha podido establecer conexion a la base de datos";
exit;
}
}
public function query($sql){
return $this->conexion->query($sql);
}
public function close(){
$this->conexion->close();
}
}
En este archivo se encuentra la clase que se encarga de gestionar la conexión a la base de datos.
En este archivo encontramos que en el constructor de la clase de inicia la conexión a la base de datos, tenemos el método query($sql), el cual se encarga de gestionar las consultas a la base de datos y el metido close() el cual cierra la conexión sobre la misma.
El siguiente archivo a analizar es el archivo 'functions.php' en este archivo encontramos dos funciones las cuales usamos en este ejemplo
require_once 'core/conexion.php';
function getEstados($id_pais)
{
$conexion = new conexion();
$result = $conexion->query("SELECT * FROM estado WHERE estado.ID_PAIS = $id_pais");
$registros = [];
while ($row = $result->fetch_assoc()) {
$registros[] = $row;
}
$conexion->close();
print json_encode($registros);
}
function getPaises()
{
$conexion = new conexion();
$result = $conexion->query("SELECT * FROM pais");
$registros = [];
while ($row = $result->fetch_assoc()) {
$registros[] = $row;
}
$conexion->close();
print json_encode($registros);
}
la tarea de estas funciones es obtener es respectivamente obtener los estados de un pais, y los paises que se encuentran en la base de datos y luego mediante la funcion json_enconde() devolvemos estos datos usando formato JSON.
Seguido de este archivo encontramos otro llamado 'bootstrap.php'.
require_once 'functions.php';
if (!empty($_GET)) {
switch ($_GET['consulta']) {
case 'paises':
getPaises();
break;
case 'estados':
$id_pais = $_GET['pais'];
getEstados($id_pais);
break;
default:
echo json_encode(['ERROR'=>'PETICION NO ENCONTRADA']);
break;
}
}
La función de este archivo es muy importante ya que en este archivo nos encargamos de recibir algunos parámetros vía GET para devolver los datos que se solicitan por el usuario, por ejemplo para obtener todos los paises la URL de petición seria como esta:
midominio.com/bootstrap.php?consulta=paises
Si quisieramos obtener todos los estados de un país la petición seria de esta forma:
midominio.com/bootstrap.php?consulta=estados&pais=1
El archivo que veremos a continuación es el archivo que es mostrado al cliente (navegador web) para la visualización de los datos este es el archivo index.html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Select dinamico</title>
<style>
.container{
margin: 0 auto;
border: 1px solid black;
padding: 2%;
font-size: 20px;
width: 50%;
}
.container > select,input{
margin: 0px;
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<label for="pais">Pais</label>
<select id="pais"></select>
<br>
<br>
<label for="estado">Estado</label>
<select id="estado"></select>
</div>
</body>
<script>
window.addEventListener('load', function () {
consultar_paises();
document.querySelector('#pais').addEventListener('change', consultar_estados);
});
function consultar_paises() {
var solicitud = new XMLHttpRequest();
solicitud.addEventListener('load', function () {
var select_paises = document.querySelector('#pais');
var obj_response = JSON.parse(this.responseText);
for (var i = 0; i < obj_response.length; i++) {
var option = document.createElement('option');
option.setAttribute('value', obj_response[i].ID);
option.innerHTML = obj_response[i].NOMBRE;
select_paises.appendChild(option);
}
});
solicitud.open('GET', 'bootstrap.php?consulta=paises');
solicitud.send();
}
function consultar_estados() {
var id_pais = this.value;
var solicitud = new XMLHttpRequest();
solicitud.addEventListener('load', function () {
var select_estados = document.querySelector('#estado');
var obj_response = JSON.parse(this.responseText);
select_estados.innerHTML = "";
for (var i = 0; i < obj_response.length; i++) {
var option = document.createElement('option');
option.setAttribute('value', obj_response[i].ID);
option.innerHTML = obj_response[i].NOMBRE;
select_estados.appendChild(option);
}
});
solicitud.open('GET', "bootstrap.php?consulta=estados&pais=" + id_pais);
solicitud.send();
}
</script>
</html>
Este es el archivo encargado de mostrar al usuario toda la información e interactuar con el para obtener esta.
tenemos dos SELECT html de los cuales en uno se mostraran los paises y en el otro los estados del país seleccionado.
para lograr esto agregamos una escucha al evento 'change' del campo 'pais' la cual ejecuta una petición AJAX para obtener los estados del país seleccionado mediante la función consultar_estados() luego que la petición AJAX es ejecutada los resultados son recorridos en un blucle for para crear los objetos option necesarios para mostrar todos los estados del pais seleccionado luego estos se añaden al campor 'estados ';
Muchas gracias por leer este tutorial.
Espero los haya ayudado ¡ Saludos !
