Indholdsfortegnelse
Kombinationen af PHP og Jquery er en af de mest anvendte teknikker til udvikling af dynamiske webapplikationer.JQuery -biblioteket indeholder mange Jquery -plugins, som udviklere bruger til at give deres applikationer en masse dynamik til at forbedre besøgeroplevelsen både på internetbrowseren eller på en mobilenhed. Vi vil fortsætte med at udvikle selvstudieprogrammet Generer dynamiske lister med Jquery, Php og Mysql, vi tilføjer dynamiske formularer til at registrere og ændre oplysninger ved at anvende kombinationen af php og jquery, vi kan udføre denne opgave uden at omdirigere siden.
Vi tilføjer også plugin jquery.validator det giver os mulighed for at validere felterne i formularen.
OpmærksomhedTil denne vejledning har vi brug for det plugin, som vi kan downloade fra http://jqueryvalidation.org/, når vi downloader det, pakker vi det ud, og vi har alle de filer, vi kun er interesserede i to for nu, som er:
jquery.validate.js hvad er selve pluginet messages_es.js som er filen, hvor vi vil lægge beskederne til den besøgende, og vi kan oversætte det efter sprog.
Vi tilføjer filerne til projektmappen:
FORSTØRRE
Hvis vi ikke ønsker at downloade pluginet, kan vi bruge det fra en ekstern server
Nu skal vi oprette filerne med den formular, der skal bruges til at registrere et køretøj, og som vi vil påberåbe fra den nye knap. For at gøre dette skal vi sikre, at den nye knap har et id (identifikator), så vi derefter kan genkende, når der opstår en hændelse, hvor der f.eks. Forekommer et klik. Derefter vil knapkoden være følgende:
Navnet på komponenten og identifikatoren kan være det samme, men unikt for hver html -komponent. I filen functions.js skriver vi følgende kode, der registrerer museklikket på knappen newvehiculo og påberåber sig hivehiculos -filen med tilmeldingsformularen.
// Tilkald køretøjets registreringsformular $ (funktion () {$ ("# newvehiculo"). Klik på (funktion () {$ .get ("http: //localhost/proyectos/agenciaautos/altavehiculos.php", funktion (data) {$ ("# formularer"). html (data); // Jeg tager sideresultatet og indsætter dataene i div -formularerne});});}); Derefter opretter vi registreringsformularen, der vil blive kaldt altavehiculos.php
Vi inkorporerer de nødvendige biblioteker i overskriften for at kunne arbejde med jquery og validere felterne
Vi skaber nogle stilarter for at give formen noget design og orden. I eksemplet kan den bruges i den samme fil eller i en separat stylesheet -fil og derefter tilføjes i overskriften.
Derefter skriver vi koden for at gemme dataene og formkoden til at indsamle data
$ værdi) {$ _POST [$ nøgle] = mysql_real_escape_string ($ værdi); } $ sql = "INSERT INTO` vehicles" (`vehicle_idtype`,` features`, `brandid`,` modelid`, `photo1`) VALUES ('{$ _POST [' vehicle_idtype ']}', '{$ _POST [ 'features']} ',' {$ _POST ['brand id']} ',' {$ _POST ['model id']} ',' {$ _POST ['photo1']} ') "; mysql_query ($ sql) eller die (mysql_error ()); ekko "Registrering afsluttet."; }?> var13 -> // Jeg konsulterer køretøjer for at udfylde køretøjstypevalget Køretøjsregistrering
Køretøjsvalg
Jeg opretter også Jquery -funktionerne for at relatere udsagnene i registreringsformularen
// vælg relateret køretøjsregistrering og mærker $ (funktion () {$ ("# køretøjsregistrering"). ændring (funktion () {køretøj = $ (dette) .val (); // Valgt værdi $ .get ("http : //localhost/proyectos/agenciaautos/marcas.php?idvehiculo="+vehiculo, funktion (data) {$ ("# altamarca"). html (data); // Jeg tager sideresultatet og indsætter dataene i kombination});});}); // vælg relaterede mærker og modeller $ (function () {$ ("# highbrand"). change (function () {brand = $ (this) .val (); // Valgt værdi $ .get ("http: / /localhost/proyectos/agenciaautos/modelos.php?idmarca="+marca, function (data) {$ ("# altamodelo"). html (data); // Jeg tager sideresultatet og indsætter dataene i select} );});}); Når vi er færdige, hvis vi udfører og trykker på den nye knap, skal registreringsformularen fremstå som følger:
// formvalidering $ (dokument) .ready (funktion () {$ ("# frmalta"). validere ({lang: 'es' // eller hvilken sprogindstilling du end har.});}); Derefter tilføjer vi den komponent, vi vil validere, den nødvendige klasse, det vil sige, at elementet ikke kan være tomt eller uden data.
Valideringsklasserne findes i meddelelsesfilen. Valideringseksempel
Valider en e -mail:
Valider en dato:
Valider et nummer:
Så hvis vi tilføjer den krævede klasse til vores formular til tekstområdeelementet, for eksempel, og i tilfælde af udvalgte sætninger, skal vi lade den første mulighed være tom, så hvis intet er valgt, vil fejlen opstå, og formularen vil ikke være sendt.
funktioner
Model Vælg
Endelig, hvis vi udfylder formularen og klikker på knappen Gem, sender formularen sig selv ved at foretage et jquery -opkald til den samme side altavehiculos.php, som sender flaget sendt med værdi 1 og derefter aktiverer indsættelsen i MySQL -tabellen.
En detalje, der stadig skal gøres enten med jquery eller omdirigering på traditionel vis, er, at når dataene er gemt, opdateres listen øverst, da registreringsformularen forsvinder, men vi har ingen begivenhed til at skylle køretøjslisten, derfor skal vi tilføje opkaldet, så listen vises i det liste lag, som vi tidligere har brugt i den anden vejledning, på denne måde kan vi registrere oplysninger, hvis vi omdirigerer siden eller udfører baggrundsopgaver, uden at brugeren skal omdirigere siden eller for at give webprogrammet mere interaktivitet eller gennemsigtighed, tillader det også genbrug af kildekode, da det er kompatibelt med enhver browser og enhed, der er kompatibel med javascript.Kan du lide og hjælpe denne vejledning?Du kan belønne forfatteren ved at trykke på denne knap for at give ham et positivt punkt
