Turinys
PHP ir „Jquery“ derinys yra vienas iš labiausiai naudojamų dinamiškų žiniatinklio programų kūrimo būdų.„JQuery“ bibliotekoje yra daug „Jquery“ papildinių, kuriuos kūrėjai naudoja, kad suteiktų savo programoms daug dinamiškumo, kad pagerintų lankytojų patirtį tiek interneto naršyklėje, tiek mobiliajame įrenginyje. Mes ir toliau kursime mokymo programą „Generuoti dinaminius sąrašus su„ Jquery “,„ Php “ir„ Mysql “, pridėsime dinaminių formų informacijai registruoti ir modifikuoti, taikydami„ php “ir„ jquery “derinį, galime atlikti šią užduotį neperkreipdami puslapio.
Taip pat pridėsime papildinį jquery.validator tai leis mums patvirtinti formos laukus.
DėmesioŠiai pamokai mums reikės papildinio, kurį galime atsisiųsti iš http://jqueryvalidation.org/, jį atsisiųsdami išpakuosime ir turėsime visus failus, kuriuos kol kas domina tik du:
jquery.validate.js kas yra pats papildinys messages_es.js kuris yra failas, į kurį įdėsime pranešimus lankytojui ir galėsime jį išversti pagal kalbą.
Pridedame failus prie projekto katalogo:
DIDELIS
Jei nenorime atsisiųsti papildinio, galime jį naudoti iš išorinio serverio
Dabar sukursime failus su forma, kuri bus naudojama transporto priemonei registruoti ir kurią iškviesime iš naujo mygtuko. Norėdami tai padaryti, turime užtikrinti, kad naujas mygtukas turėtų ID (identifikatorių), kad galėtume atpažinti, kada įvyksta įvykis, kuriame, pavyzdžiui, paspaudžiamas. Tada mygtuko kodas bus toks:
Komponento pavadinimas ir identifikatorius gali būti vienodi, bet unikalūs kiekvienam html komponentui. Faile Fun.js įrašome šį kodą, kuris aptiks pelės paspaudimą ant newvehiculo mygtuko ir iškvies hivehiculos failą su registracijos forma.
// Kviesti transporto priemonės registracijos formą $ (function () {$ ("# newvehiculo"). Spustelėkite (function () {$ .get ("http: //localhost/proyectos/agenciaautos/altavehiculos.php", funkcija (duomenys) {$ ("# formos"). html (duomenys); // paimu puslapio rezultatą ir įterpiu duomenis į div formas});});}); Tada sukuriame registracijos formą, kuri bus vadinama altavehiculos.php
Į antraštę įtraukiame reikalingas bibliotekas, kad galėtume dirbti su „jquery“ ir patvirtinti laukus
Mes kuriame tam tikrus stilius, kad suteiktų formai tam tikrą dizainą ir tvarką. Pavyzdžiui, jis gali būti naudojamas tame pačiame faile arba atskirame stiliaus lapo faile ir pridėtas antraštėje.
Tada rašome kodą duomenims išsaugoti ir formos kodą duomenims fiksuoti
$ vertė) {$ _POST [$ key] = mysql_real_escape_string ($ vertė); } $ sql = "INSERT INTO" transporto priemonės "(" vehicle_idtype "," charakteristikos "," brandid "," modelid "," photo1 ") VALUES ('{$ _POST [' vehicle_idtype ']}', '{$ _POST [ 'features']} ',' {$ _POST ['brand id']} ',' {$ _POST ['model id']} ',' {$ _POST ['photo1']} ') "; mysql_query ($ sql) arba mirti (mysql_error ()); aidas „Registracija baigta“; }?> var13 -> // Konsultuoju transporto priemones, kad užpildyčiau transporto priemonės tipo pasirinkimą Transporto priemonės registracija
Transporto priemonės pasirinkimas
Taip pat sukuriu „Jquery“ funkcijas, kad susiečiau registracijos formos pareiškimus
// pasirinkite susijusią transporto priemonės registraciją ir prekės ženklus $ (funkcija () {$ ("# transporto priemonės registracija"). change (function () {vehicle = $ (this) .val (); // Pasirinkta vertė $ .get ("http : //localhost/proyectos/agenciaautos/marcas.php?idvehiculo="+vehiculo, funkcija (duomenys) {$ ("# altamarca"). html (duomenys); // Aš paimu puslapio rezultatą ir įterpiu duomenis į kombinuotas});});}); // pasirinkite susijusius prekės ženklus ir modelius $ (function () {$ ("# highbrand"). change (function () {brand = $ (this) .val (); // Pasirinkta vertė $ .get ("http: / /localhost/proyectos/agenciaautos/modelos.php?idmarca="+marca, function (data) {$ ("# altamodelo"). html (data); // Aš paimu puslapio rezultatą ir įterpiu duomenis į pasirinktą} );});}); Baigę vykdyti ir paspausdami naują mygtuką, registracijos forma turėtų būti tokia:
// formos patvirtinimas $ (dokumentas) .ready (function () {$ ("# frmalta"). validate ({lang: 'es' // arba bet kokia kalbos parinktis.});}); Tada komponente, kurį norime patvirtinti, pridedame reikiamą klasę, tai yra, elementas negali būti tuščias arba be duomenų.
Patvirtinimo klases galite rasti pranešimo faile. Patvirtinimo pavyzdys
Patvirtinkite el. Paštą:
Patvirtinkite datą:
Patvirtinkite skaičių:
Taigi, jei, pavyzdžiui, prie savo formos pridėsime reikiamą klasę prie „textarea“ elemento ir pasirinktų teiginių atveju pirmąją parinktį turime palikti tuščią, tada, jei nieko nepasirinkta, klaida įvyks ir forma nebus išsiųstas.
funkcijos
Modelio pasirinkimas
Galiausiai, jei užpildysime formą ir spustelėsime mygtuką Išsaugoti, forma bus išsiųsta paskambinus jquery į tą patį puslapį altavehiculos.php, kuris siunčia vėliavą, išsiųstą su 1 reikšme, ir suaktyvina įterpimą į „MySQL“ lentelę.
Viena detalė, kurią dar reikia atlikti naudojant „jquery“ arba peradresuojant tradiciniu būdu, yra ta, kad išsaugojus duomenis, viršuje esantis sąrašas atnaujinamas, nes dingsta registracijos forma, tačiau neturime jokių įvykių, kuriais būtų galima drėkinti transporto priemonių sąrašą, todėl turime pridėti skambutį, kad sąrašas būtų rodomas sąrašo sluoksnyje, kurį anksčiau naudojome kitoje pamokoje, tokiu būdu galime užregistruoti informaciją, jei nukreipiate puslapį arba atliekate fonines užduotis be to, kad vartotojas turėtų nukreipti puslapį arba kad žiniatinklio programai būtų suteikta daugiau interaktyvumo ar skaidrumo, ji taip pat leidžia pakartotinai naudoti šaltinio kodą, nes jis suderinamas su bet kokia naršykle ir įrenginiu, suderinamu su „javascript“.Ar jums patiko ir padėjo ši pamoka?Galite apdovanoti autorių paspausdami šį mygtuką, kad suteiktumėte jam teigiamą tašką
