Innehållsförteckning
Kombinationen av PHP och Jquery är en av de mest använda teknikerna för att utveckla dynamiska webbapplikationer.JQuery -biblioteket erbjuder många Jquery -plugins som utvecklare använder för att ge sina applikationer mycket dynamik för att förbättra besökarupplevelsen både i webbläsaren eller på en mobil enhet. Vi kommer att fortsätta utveckla handledningsprogrammet Generera dynamiska listor med Jquery, Php och Mysql, vi kommer att lägga till dynamiska formulär för att registrera och ändra information, genom att använda kombinationen av php och jquery kan vi utföra denna uppgif.webpt utan att omdirigera sidan.
Vi kommer också att lägga till plugin jquery.validator som gör att vi kan validera formulärets fält.
UppmärksamhetFör denna handledning behöver vi den plugin som vi kan ladda ner från http://jqueryvalidation.org/, när vi laddar ner den packar vi upp den och vi kommer att ha alla filer som vi bara är intresserade av två för närvarande, som är:
jquery.validate.js vad är själva pluginet messages_es.js som är filen där vi kommer att lägga meddelandena för besökaren och vi kan översätta det efter språk.
Vi lägger till filerna i projektkatalogen:
FÖRSTORA
Om vi inte vill ladda ner plugin -programmet kan vi använda det från en extern server
Nu ska vi skapa filerna med formuläret som ska användas för att registrera ett fordon och som vi kommer att åberopa från den nya knappen. För att göra detta måste vi se till att den nya knappen har ett id (identifierare) så att vi sedan kan känna igen när en händelse inträffar där till exempel ett klick inträffar. Då kommer knappkoden att vara följande:
Komponentens namn och identifieraren kan vara densamma, men unikt för varje html -komponent. I filen functions.js skriver vi följande kod som upptäcker musklick på newvehiculo -knappen och åberopar hivehiculos -filen med registreringsformuläret.
// Åkalla fordonsregistreringsformulär $ (function () {$ ("# newvehiculo"). Klicka på (function () {$ .get ("http: //localhost/proyectos/agenciaautos/altavehiculos.php", function (data) {$ ("# forms"). html (data); // Jag tar sidresultatet och sätter in data i div -formuläret});});}); Sedan skapar vi registreringsformuläret som kommer att kallas altavehiculos.php
Vi införlivar nödvändiga bibliotek i rubriken för att kunna arbeta med jquery och validera fälten
Vi skapar några stilar för att ge formen lite design och ordning. I exemplet kan den användas i samma fil eller i en separat formatmallfil och sedan läggas till i rubriken.
Sedan skriver vi koden för att spara data och formulärkoden för att fånga data
$ värde) {$ _POST [$ key] = mysql_real_escape_string ($ värde); } $ 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 ()); eko "Registrering slutförd."; }?> var13 -> // Jag konsulterar fordon för att fylla i fordonstypvalet Fordonsregistrering
Fordonsval
Jag skapar också Jquery -funktionerna för att relatera uttalandena i registreringsformuläret
// välj relaterad fordonsregistrering och märken $ (funktion () {$ ("# fordonsregistrering"). ändra (funktion () {fordon = $ (detta) .val (); // Valt värde $ .get ("http : //localhost/proyectos/agenciaautos/marcas.php?idvehiculo="+vehiculo, function (data) {$ ("# altamarca"). html (data); // Jag tar sidresultatet och sätter in data i kombination});});}); // välj relaterade märken och modeller $ (function () {$ ("# highbrand"). change (function () {brand = $ (this) .val (); // Selected value $ .get ("http: / /localhost/proyectos/agenciaautos/modelos.php?idmarca="+marca, function (data) {$ ("# altamodelo"). html (data); // Jag tar sidresultatet och sätter in data i välj} );});}); När vi är klara, om vi kör och trycker på den nya knappen, bör registreringsformuläret se ut så här:
// formvalidering $ (dokument) .ready (funktion () {$ ("# frmalta"). validera ({lang: 'es' // eller vilket språkalternativ du än har.});}); I den komponent som vi vill validera lägger vi till den nödvändiga klassen, det vill säga elementet kan inte vara tomt eller utan data.
Valideringsklasserna finns i meddelandefilen. Valideringsexempel
Verifiera ett e -postmeddelande:
Validera ett datum:
Validera ett nummer:
Så om vi lägger till den obligatoriska klassen i vårt formulär till textområdeelementet, till exempel, och när det gäller utvalda uttalanden, måste vi lämna det första alternativet tomt, om inget väljs kommer felet att inträffa och formuläret kommer inte att vara skickat.
funktioner
Välj modell
Slutligen, om vi fyller i formuläret och klickar på knappen Spara, skickar formuläret sig själv genom att ringa ett jquery -samtal till samma sida altavehiculos.php, som skickar flaggan skickad med värde 1 och aktiverar sedan infogningen i MySQL -tabellen.
En detalj som återstår att göra antingen med jquery eller omdirigering på det traditionella sättet är att när data sparas listan överst uppdateras eftersom registreringsformuläret försvinner, men vi har ingen händelse för att bevattna fordonslistan, därför måste vi lägga till samtalet så att listan visas i listskiktet som vi tidigare använde i den andra självstudien, på så sätt kan vi registrera information om omdirigera sidan eller göra bakgrundsuppgif.webpter utan att användaren måste omdirigera sidan eller för att ge webbprogrammet mer interaktivitet eller transparens, tillåter det också återanvändning av källkoden eftersom den är kompatibel med alla webbläsare och enheter som är kompatibla med javascript.Gillade du och hjälpte denna handledning?Du kan belöna författaren genom att trycka på den här knappen för att ge honom en positiv poäng
