Jak vytvořit dynamické seznamy s MySQL, PHP a jQuery?

Tento příspěvek vysvětluje pokyny pro vytváření hodnot pro vybraný seznam na základě hodnoty vybrané z jiného výběru. ¿Jak vytvořit dynamické seznamy pomocí JQuery, PHP a mySQL?

Budeme používat AJAX (asynchronní JavaScript a XML), to eliminuje potřebu obnovovat celou stránkuposkytují plynulejší uživatelské prostředí a zabraňují zbytečným hovorům na server.

Volání AJAX odešle vybranou rozevírací hodnotu do skriptu PHP, který vrátí všechny odpovídající hodnoty z tabulky v databázi MySQL.

Jak vytvořit dynamické seznamy pomocí JQuery, PHP a mySQL?

Následující příklad použije imaginární scénář výběru čajového ratanu, kde vybereme jména lidí na základě jejich oblíbeného nápoje.

Pokyny týkající se PHP

Chcete-li se připojit k databázi, nejprve se podívejme na kód PHP a vyberte hodnoty z tabulky na základě parametru GET.

První řádek navazuje připojení k databázinásleduje výběrový dotaz pro vrácení hodnot tabulky.

Tyto hodnoty použijeme k dokončení našeho druhého výběrového seznamu. PHP poté prochází každý řádek v tabulce odrážející HTML pro možnosti výběru.

<? 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);

?>

Je zřejmé, že v příkazu SQL budete muset nahradit hodnoty připojení k databázi svými vlastními podrobnostmi a názvy tabulek a polí.

Uložte soubor, například ajax-getvalues.php a zkontrolujte, zda vše funguje, předáním parametru GET v adrese URL. ajax-getvalues.php? Hodnota = káva.

Možná budete chtít použít normální „reverb“ ke generování testovaných hodnot. Všimněte si, že pokud používáte číselné hodnoty, nemusíte kolem sebe apostrofy ‘$ selectvalueV příkazu SQL.

Pokyny, co dělat s HTML

1. Nyní vytvoříme dva výběry a ID ‘výběr seznamu‘Y’seznam účelV tomto příkladu.
2. Na našem prvním výběrovém seznamu budou základní možnosti.
3. Druhý výběr nemá žádnou hodnotu možnosti, protože bude vyplněn 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

$ ("https://computercoach.co.nz/tu/mysql-php-ve-jquery-ile-dinamik-listeler-nasil-olusturulur/#" + list_target_id) .html (initial_target_html); // Dale al objetivo, selecciona la opción de solicitud

$ ("https://computercoach.co.nz/tu/mysql-php-ve-jquery-ile-dinamik-listeler-nasil-olusturulur/#" + 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
$ ("https://computercoach.co.nz/tu/mysql-php-ve-jquery-ile-dinamik-listeler-nasil-olusturulur/#" + 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
$ ("https://computercoach.co.nz/tu/mysql-php-ve-jquery-ile-dinamik-listeler-nasil-olusturulur/#" + 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);
$ ("https://computercoach.co.nz/tu/mysql-php-ve-jquery-ile-dinamik-listeler-nasil-olusturulur/#" + list_target_id) .html (salida);
}
error: function (xhr, ajaxOptions, thrownError) {
alert (xhr.status + "" + thrownError);
}});
}
});
});

• Nejprve vytvoříme několik proměnných pro ID seznamu.
• Spolu s počátečním výběrem, který uživatele vyzve k provedení výběru z první volby pro náš cílový výběr.
• Potom nakonfigurujeme posluchače událostí takže zjistíme, kdy se náš seznam počátečního výběru změnil, a přiřadíme vybranou hodnotu proměnné „value select“.
• Pokud je vybrána první možnost „prosím vyberte“ (s prázdnou hodnotou), vrátí se druhý výběrový seznam k prvnímu požadavku.
• Pokud vybraná hodnota nemá hodnotu null, provedeme volání AJAX.
• Rovněž jsme nastavili hodnotu výběru cíle na „Načítání…“, aby uživatel věděl, že se něco děje.
• To může blikat jen na okamžik, takže to možná budete chtít deaktivovat.
• Volání AJAX vyžaduje náš skript PHP pomocí hodnoty vybrané jako parametr GET.
• Po úspěšném provedení skriptu.
• Nastaví HTML cílového výběru s hodnotami možností, které jsme echo s PHP.
• Zahrnuje také některé zpracování chyb, které nám mohou pomoci identifikovat jakékoli problémy., s odkazem.