javascript

PHP y JavaScript: llenar select con AJAX

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.

Estoy aquí para ayudarte 🤝💻

Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/