Siguiendo con los tutoriales de listas desplegables o select con JavaScript, vamos a ver cómo llenar un select con JS pero con datos traídos desde PHP usando AJAX, es decir, trayendo los datos en segundo plano desde un servidor con PHP usando JavaScript.
Esto es, se podría decir, la continuación del tutorial para llenar un select a partir de un arreglo con JavaScript, pero ahora el arreglo va a provenir de PHP y será transmitido como JSON.
Será un ejemplo sencillo pero que te servirá para casos más complejos al momento de llenar un select con AJAX desde PHP.
Definiendo arreglo con PHP
Comencemos definiendo el array de PHP. Esta colección de datos podría venir de una base de datos o cualquier otro lugar. Por simplicidad lo he escrito manualmente.
Estamos imprimiéndolo directamente como JSON usando json_encode. Cuando visitemos este archivo (cuyo nombre es datos.php), aparecerá el arreglo de personas codificado.
<?php
# El siguiente arreglo podría venir de una base de datos
# https://parzibyte.me/blog/2019/07/17/php-bases-de-datos-ejemplos-tutoriales-conexion/
$personas = [
[
"id" => 1,
"nombre" => "Parzibyte",
"edad" => 255,
],
[
"id" => 2,
"nombre" => "Chrono",
"edad" => 100,
],
[
"id" => 3,
"nombre" => "Antonio",
"edad" => 200,
],
];
header("Content-Type: application/json");
echo json_encode($personas);
Petición HTTP para traer arreglo con JavaScript
El arreglo ya está definido del lado del servidor, ahora falta consultarlo con JavaScript y llenar el select a partir del mismo.
He colocado el código para llenar un select desde JavaScript a partir de un array traído con PHP en una función llamada llenar que queda así:
const llenar = async () => {
const respuestaHttp = await fetch("./datos.php");
const personas = await respuestaHttp.json();
for(const persona of personas){
const opcion = Object.assign(document.createElement("option"), {
value: persona.id,
text: `${persona.nombre} ${persona.edad} años`,
});
$selectPersonas.appendChild(opcion);
}
}Para traer los datos usamos la función fetch. Decodificamos la respuesta como json y una vez decodificada será un array que ya podemos recorrer para llenar el select.
Es importante que notes que el archivo que estamos consultando es datos.php, así se llama el archivo donde está el código PHP, esa es la URL.
Estoy usando ./ para referirme a la ruta relativa, ya que el archivo desde donde se hace la petición y el archivo PHP está en el mismo directorio, también podrías poner la url completa (por ejemplo http://localhost/ejemplo/datos.php).
La función ya está definida pero no ha sido invocada. Tampoco te he mostrado la definición del select para tener una referencia al mismo y poder agregar una opción por cada dato en el arreglo traído desde PHP, veamos el código completo a continuación.
Poniendo todo junto
Ya te mostré el código PHP anteriormente, ahora veamos el código HTML completo, junto con el script de JavaScript. Lo que se hace es:
- Hacer una petición HTTP GET al archivo PHP usando fetch
- Recorrer el arreglo
- Por cada valor en el arreglo, agregarlo al select teniendo el id y el valor por separado.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Llenar select con PHP y JavaScript</title>
</head>
<body>
<select id="selectPersonas"></select>
<script>
const $selectPersonas = document.querySelector("#selectPersonas");
const llenar = async () => {
const respuestaHttp = await fetch("./datos.php");
const personas = await respuestaHttp.json();
for (const persona of personas) {
const opcion = Object.assign(document.createElement("option"), {
value: persona.id,
text: `${persona.nombre} ${persona.edad} años`,
});
$selectPersonas.appendChild(opcion);
}
}
llenar();
</script>
</body>
</html>Por cierto, la referencia al select está siendo obtenida con querySelector y está definido en $selectPersonas.
Con este código se está llenando un select con JS y PHP usando AJAX. A partir de aquí ya puedes imprimir el valor, colocar algo distinto en el text y value, etcétera. Recomiendo leer el tutorial con JS puro.
