Saltar al contenido

¿Cómo Generar Listados Dinámicos con mySQL, PHP y jQuery?

4 junio, 2019

Esta publicación recorre las pautas necesarias para generar los valores de una lista de selección basada en el valor elegido de otra selección. ¿Cómo Generar Listados Dinamicos con jQuery, PHP y mySQL?

Utilizaremos AJAX (JavaScript asíncrono y XML), ya que esto evita la necesidad de actualizar toda la página, brindando una experiencia más suave al usuario y evitando llamadas innecesarias al servidor.

La llamada AJAX enviará el valor desplegable seleccionado a un script PHP que devolverá todos los valores coincidentes de una tabla en una base de datos MySQL.

¿Cómo Generar Listados Dinámicos con jQuery, PHP y mySQL?

El siguiente ejemplo utilizará un escenario de selección de rota de té imaginario, donde seleccionaremos los nombres de las personas según su bebida favorita.

Pautas que Hacer con el PHP

Veamos primero el código PHP para conectarse a la base de datos y seleccionar los valores de una tabla basada en un parámetro GET.

La primera línea establece la conexión de la base de datos, seguida de una consulta de selección para devolver los valores de una tabla.

Utilizaremos estos valores para completar nuestra segunda lista de selección. El PHP luego recorre cada fila de la tabla, haciendo eco del HTML para las opciones de selección.

<? php
$ connection = mysqli_connect ("localhost", "db-username", "db-password", "db-name");

$ selectvalue = mysqli_real_escape_string ($ connection, $ _GET ['svalue']);

mysqli_select_db ($ connection, "db-name");
$ result = mysqli_query ($ connection, "SELECCIONE tbl_drinks.drink_name DE tbl_drinks DONDE tbl_drinks.drink_type = '$ selectvalue'");

echo '<option value = ""> Por favor seleccione ... </option>';
while ($ row = mysqli_fetch_array ($ result))
{
echo '<option value = "'. $ row ['drink_name']. '">'. $ row ['drink_name']. "</option>";
// echo $ row ['drink_type']. "<br/>";
}

mysqli_free_result ($ resultado);
mysqli_close ($ conexión);

?>

Obviamente, deberá reemplazar los valores de conexión de la base de datos con sus propios detalles junto con su tabla y nombre (s) de campo en la declaración SQL.

Guarde su archivo, por ejemplo, ajax-getvalues.php y verifique que todo esté funcionando al pasar el parámetro GET en la URL, es decir, ajax-getvalues.php? Svalue = coffee.

Es posible que desee utilizar un ‘eco’ regular para generar los valores a probar. Tenga en cuenta que si está utilizando valores numéricos, no necesita los apóstrofes alrededor de ‘$ selectvalue‘ en la declaración de SQL.

 

Pautas que Hacer con el HTML

  1. Ahora crearemos las dos listas de selección y asignaremos las ID como ‘list-select‘ y ‘list- objetivo‘ en este ejemplo.
  2. Nuestra primera lista de selección tendrá un conjunto básico de opciones.
  3. La segunda selección no tiene valores de opción, ya que estos serán rellenados por el AJAX.
<select name = "list-select" id = "list-select">
<opción valor = ""> Por favor seleccione .. </option>
<opción valor = "té"> té </option>
<opción valor = "café"> café </option>
<option value = "water"> water </option>
</select>

<select name = "list-target" id = "list-target"> </select>
El jQuery
Now para reunirlo todo. Aquí está la jQuery que escucha el cambio de la lista de selección, realiza la llamada AJAX y completa la selección de destino.
$ (document) .ready (function ($) {
var list_target_id = 'list-target'; // primera selección de lista de identificación
var list_select_id = 'list-select'; // segunda selección de lista de identificación
var initial_target_html = '<valor de opción = ""> Seleccione un color ... </option> '; // Mensaje inicial para selección de destino

$ ('#' + list_target_id) .html (initial_target_html); // Dale al objetivo, selecciona la opción de solicitud

$ ('#' + list_select_id) .change (function (e) {
// Agarre el valor elegido en el primer cambio de lista de selección
var selectvalue = $ (this) .val ();

// Mostrar el estado de 'carga' en la lista de selección de destino
$ ('#' + list_target_id) .html ('<option value = ""> Loading ... </option>');

if (selectvalue == "") {
// Mostrar solicitud inicial en selección de destino si se selecciona un valor en blanco
$ ('#' + list_target_id) .html (initial_target_html);
} else {
// Realizar solicitud AJAX, utilizando el valor seleccionado como GET
$ .ajax ({url: 'ajax-getvalues.php? svalue =' + selectvalue,
éxito: función (salida) {
// alerta (salida);
$ ('#' + list_target_id) .html (salida);
}
error: function (xhr, ajaxOptions, thrownError) {
alert (xhr.status + "" + thrownError);
}});
}
});
});

  • Primero configuramos algunas variables para los ID de lista de selección.
  • Junto con una opción inicial para nuestra selección de destino que solicita al usuario que realice una selección de la selección inicial.
  • Luego configuramos un detector de eventos para que detecte cuándo se cambia nuestra primera lista de selección y asignamos el valor seleccionado a una variable de ‘valor de selección’.
  • Si se elige la primera opción ‘por favor seleccione’ (con un valor en blanco), sin embargo, la segunda lista de selección volverá a la solicitud inicial.
  • Si el valor seleccionado no está en blanco, entonces ejecutamos la llamada AJAX.
  • También establecemos el valor de la selección de destino en ‘Cargando …’ para que el usuario sepa que algo está sucediendo.
  • Es posible que esto solo parpadee momentáneamente, por lo que es posible que desee desactivar esto.
  • La llamada AJAX solicita nuestro script PHP, utilizando el valor seleccionado como el parámetro GET.
  • En la ejecución exitosa de la secuencia de comandos.
  • Se establecerá el HTML de la selección de destino con los valores de opción que estamos haciendo eco con el PHP.
  • También se incluye cierto manejo de errores que puede ayudarnos a identificar cualquier problema, con conectividad.
¿Nos das 5 estrellas? ?