Obsah
Kombinace PHP a Jquery je jednou z nejpoužívanějších technik pro vývoj dynamických webových aplikací.Knihovna JQuery poskytuje mnoho doplňků Jquery, které vývojáři používají k tomu, aby jejich aplikacím poskytly velkou dynamiku a zlepšily tak zážitek návštěvníků jak v internetovém prohlížeči, tak v mobilním zařízení. Budeme pokračovat ve vývoji výukové aplikace Generování dynamických seznamů pomocí Jquery, Php And Mysql, přidáme dynamické formuláře pro registraci a úpravu informací, použitím kombinace php a jquery můžeme tento úkol provést bez přesměrování stránky.
Doplněk také přidáme jquery.validator to nám umožní ověřit pole formuláře.
PozornostPro tento tutoriál budeme potřebovat plugin, který si můžeme stáhnout z http://jqueryvalidation.org/, když jej stáhneme, rozbalíme ho a budeme mít všechny soubory, které nás prozatím zajímají pouze dva, což jsou:
jquery.validate.js jaký je samotný plugin messages_es.js což je soubor, kam umístíme zprávy pro návštěvníka a můžeme jej přeložit podle jazyka.
Soubory přidáme do adresáře projektu:
ZVĚTŠIT
Pokud nechceme plugin stáhnout, můžeme jej použít z externího serveru
Nyní se chystáme vytvořit soubory s formulářem, který bude použit k registraci vozidla a který vyvoláme z nového tlačítka. K tomu musíme zajistit, aby nové tlačítko mělo id (identifikátor), abychom pak mohli rozeznat, kdy dojde k události, při které dojde například ke kliknutí. Pak bude kód tlačítka následující:
Název komponenty a identifikátor mohou být stejné, ale jedinečné pro každou html komponentu. Do souboru functions.js napíšeme následující kód, který detekuje kliknutí myší na tlačítko newvehiculo a vyvolá soubor hivehiculos pomocí přihlašovacího formuláře.
// Vyvolání registračního formuláře vozidla $ (funkce () {$ ("# newvehiculo"). Klikněte (funkce () {$ .get ("http: //localhost/proyectos/agenciaautos/altavehiculos.php", funkce (data) {$ ("# forms"). html (data); // Vezmu výsledek stránky a vložím data do formulářů div});});}); Poté vytvoříme registrační formulář, který se bude jmenovat altavehiculos.php
Začlenili jsme do záhlaví potřebné knihovny, abychom mohli pracovat s jquery a ověřovat pole
Vytváříme některé styly, abychom dali formuláři určitý design a pořádek. Například jej lze použít ve stejném souboru nebo v samostatném souboru stylů a poté přidat do záhlaví.
Poté napíšeme kód pro uložení dat a kód formuláře pro zachycení dat
hodnota $) {$ _POST [$ key] = mysql_real_escape_string ($ hodnota); } $ sql = "INSERT INTO` vehicles` (` vehicle_idtype`, `characteristics`,` brandid`, `modelid`,` photo1`) VALUES ('{$ _POST [' vehicle_idtype ']}}', '{$ _POST [ 'charakteristiky']} ',' {$ _POST ['brand id']} ',' {$ _POST ['model id']} ',' {$ _POST ['photo1']}} ') "; mysql_query ($ sql) nebo die (mysql_error ()); echo „Registrace dokončena.“; }?> var13 -> // Poradím se s vozidly, abych vyplnil výběr typu vozidla Registrace vozidla
Výběr vozidla
Vytvářím také funkce Jquery, které souvisejí s prohlášeními v registračním formuláři
// vyberte související registraci vozidla a značky $ (funkce () {$ ("# registrace vozidla"). change (funkce () {vehicle = $ (this) .val (); // Vybraná hodnota $ .get ("http : //localhost/proyectos/agenciaautos/marcas.php?idvehiculo="+vehiculo, function (data) {$ ("# altamarca"). html (data); // Vezmu výsledek stránky a vložím data do combo});});}); // vyberte související značky a modely $ (funkce () {$ ("# highbrand"). change (funkce () {brand = $ (this) .val (); // Vybraná hodnota $ .get ("http: / /localhost/proyectos/agenciaautos/modelos.php?idmarca="+marca, function (data) {$ ("# altamodelo"). html (data); // Vezmu výsledek stránky a vložím data do výběru} );});}); Po dokončení, pokud spustíme a stiskneme nové tlačítko, registrační formulář by měl vypadat následovně:
// ověření formuláře $ (dokument) .ready (funkce () {$ ("# frmalta"). validate ({lang: 'es' // nebo jakoukoli jazykovou možnost máte.});}); Potom do komponenty, kterou chceme ověřit, přidáme požadovanou třídu, to znamená, že prvek nemůže být prázdný nebo bez dat.
Třídy ověření najdete v souboru zpráv. Příklad ověření
Ověřit e -mail:
Ověřit datum:
Ověřit číslo:
Pokud tedy přidáme požadovanou třídu do našeho formuláře například do prvku textarea a v případě příkazů select musíme nechat první možnost prázdnou, pak pokud není nic vybráno, dojde k chybě a formulář nebude odesláno.
funkce
Výběr modelu
Nakonec, když vyplníme formulář a klikneme na tlačítko Uložit, formulář se sám odešle provedením jquery volání na stejnou stránku altavehiculos.php, která odešle odeslaný příznak s hodnotou 1 a poté aktivuje vložení do tabulky MySQL.
Jeden detail, který zbývá provést buď pomocí jquery nebo přesměrování tradičním způsobem, je ten, že když jsou data uložena, seznam nahoře se obnoví, protože registrační formulář zmizí, ale nemáme žádnou událost pro zavlažování seznamu vozidel, proto musíme přidat volání tak, aby se seznam zobrazil ve vrstvě seznamu, kterou jsme dříve použili v jiném tutoriálu, tímto způsobem můžeme registrovat informace při přesměrování stránky nebo provádění úkolů na pozadí, aniž by uživatel musel stránku přesměrovat nebo aby poskytla větší interaktivitu nebo transparentnost webové aplikaci, umožňuje také opětovné použití zdrojového kódu, protože je kompatibilní s jakýmkoli prohlížečem a zařízením kompatibilním s javascriptem.Líbil se vám tento návod a pomohl mu?Autora můžete odměnit stisknutím tohoto tlačítka, čímž mu dáte kladný bod
