Hvor mange gange er du stødt på, at du har indtastet forkerte data, hvorfor siden genindlæste og fuldstændigt slettede de indtastede tegn i felterne. For at løse dette er der en ret populær tilgang til at bygge en brugergrænseflade, og dens navn er ajax. Det optræder i mange projekter og bruges på mange måder.
Send en ajax-formular: forbinder biblioteker
Inkluder jquery-biblioteket i index.php.
Der er en anden måde at inkludere jquery i et dokument. Du skal downloade biblioteket fra jquery's officielle websted, placere det i den rigtige mappe og indsætte linket til det sådan her:
Tilslutning og opsætning af dokumenter
1. Opret et.php-dokument i mappen med webstedet med et hvilket som helst navn, der passer dig - dette vil sende ajax php-formularen. I den kan du skrive i hvilket format teksten med beskeden vil blive vist. For eksempel form1.php.
2. I din javascript-filmappe skal du oprette en.js-fil medethvert passende navn. For eksempel form.js.
3. Forbind denne mappe til dit dokument.
4. Opret en formular med følgende parametre:
I den, glem ikke at oprette felter til at indtaste dine data.
5. Gå til filen form1.php i mappen med webstedet, hvori skriv:
Når du indsender formularen, vil browseren vise oplysninger om dataene.
I den samme fil kan du skrive, hvad der præcist skal vises, eller hvordan. Du kan også skrive cyklusser eller algoritmer her.
Sender ajax jquery-formular
1. I den oprettede form.js-fil skal du skrive koden, der er ansvarlig for at få filen til at virke, efter at webstedssiden er fuldt indlæst.
$(document).ready(function(){ //Vores næste kode vil køre her });
2. Så skal du tilpasse indsend-knappen. Gør det hele i den samme fil.
$("form").submit(function(event) { event.preventDefault(); //følgende kode vil blive skrevet her });
Den første del af koden er ansvarlig for at vælge elementet på siden, og den anden er ansvarlig for at forhindre standardhandlingen.
3. Tag derefter for eksempel en ajax-formularindsendelse ved succes.
$.ajax({ type: $(this).attr('method'), url: $(this).attr('action'), data: new FormData(this), contentType: false, cache: false, processData: false, succes: function(result){ alert(result); } });
Det følgende er detaljerede beskrivelser af hver indstilling.
- type -dette er den type anmodning, der indsendes i formularen; da det koster POST, vil anmodningstypen være passende;
- this - elementvalg inde i konstruktionen;
- attr - forkortelse for tiltrækning (attraktion), det vil sige, at en bestemt parameter for det valgte mål (form) tiltrækkes;
- url - parameter ansvarlig for, hvor anmodningen vil blive sendt; i dette tilfælde, hvad der er skrevet i formparametrene (form1.php);
- data - specificerer formulardata;
- contentType - ansvarlig for at sende headere til serveren; i dette tilfælde er det ikke nødvendigt;
- cache - ansvarlig for at gemme brugerens cache;
- procesData - ansvarlig for at konvertere data til en streng;
- success - viser resultatet af en vellykket dataindsendelse; derfor, hvis afsendelsen af data lykkedes, udføres funktionens handlinger.
4. Færdig, nu når du indsender ajax-formularen, vil du modtage data uden at opdatere siden.
Resultatet kan ændres ved hjælp af form1.php-filen, hvor du kan angive, hvad der præcist skal vises som et resultat. For eksempel
Du kan eksperimentere og oprette en kontrol for rigtigheden af at indtaste visse data: hvis dataene ikke er korrekte, så vises den ønskede besked, ellers omdirigeres den til den korrekte side. Mange andre ting er også mulige, hvad end dit hjerte begærer.
Der sendes også data til serveren asynkront. Det er, når brugeren indtaster tekst, og den bliver straks fremhævet med rødt, hvilket indikerer, at de indtastede data ikke er korrekte. Om detder er mange manualer på internettet, hvor alt er tydeligt forklaret og vist med eksempler.
Konklusion
Ajax er utvivlsomt et nyttigt værktøj til at bygge hjemmesider. For at lave sider og grænseflader af høj kvalitet er det simpelthen nødvendigt. Det er værd at bemærke, at det er meget vigtigt at kende jQuery for fuldt ud at forstå billedet og hvad der står i koden, for en simpel copy-paste kan ikke altid hjælpe og lære dig at forstå koden. Det er altid værd at huske på, at sprogversioner er opdateret, og nogle funktioner kan simpelthen forsvinde. Derfor er det måske ikke alle løsninger, der er relevante, ofte virker den skrevne kode simpelthen ikke eller giver ikke det resultat, som du gerne vil se på din skærm.
