Hvor mange ganger har du støtt på det faktum at du har skrevet inn feil data, på grunn av dette har siden lastet inn på nytt og fullstendig slettet tegnene som er skrevet inn i feltene. For å fikse dette er det en ganske populær tilnærming til å bygge et brukergrensesnitt, og navnet er ajax. Den vises i mange prosjekter og brukes på mange måter.
Sende et ajax-skjema: kobler til biblioteker
Inkluder jquery-biblioteket i index.php.
Det er en annen måte å inkludere jquery i et dokument. Du må laste ned biblioteket fra det offisielle nettstedet for jquery, plasser det i riktig mappe og lim inn lenken til det slik:
Koble til og sette opp dokumenter
1. Lag et.php-dokument i mappen med nettstedet med et hvilket som helst navn som passer deg - dette vil sende ajax php-skjemaet. I den kan du skrive i hvilket format teksten med meldingen skal vises. For eksempel form1.php.
2. Lag en.js-fil med i mappen med javascript-fileret passende navn. For eksempel form.js.
3. Koble denne mappen til dokumentet ditt.
4. Opprett et skjema med følgende parametere:
I den, ikke glem å opprette felt for å legge inn dataene dine.
5. Gå til filen form1.php i katalogen med nettstedet, der du skriver:
Når du sender inn skjemaet, vil nettleseren vise informasjon om dataene.
I samme fil kan du skrive nøyaktig hva som skal vises eller hvordan. Du kan også skrive sykluser eller algoritmer her.
Sender ajax jquery-skjema
1. I den opprettede form.js-filen må du skrive koden som er ansvarlig for å få filen til å fungere etter at sidesiden er fulllastet.
$(document).ready(function(){ //Vår neste kode vil kjøre her });
2. Deretter må du tilpasse send-knappen. Gjør alt i samme fil.
$("form").submit(function(event) { event.preventDefault(); //følgende kode vil bli skrevet her });
Den første delen av koden er ansvarlig for å velge elementet på siden, og den andre er ansvarlig for å forhindre standardhandlingen.
3. Ta for eksempel en ajax-innsending etter suksess.
$.ajax({ type: $(this).attr('method'), url: $(this).attr('action'), data: new FormData(this), contentType: false, cache: false, processData: false, success: function(result){ alert(result); } });
Det følgende er detaljerte beskrivelser av hver innstilling.
- type -dette er typen forespørsel som sendes inn i skjemaet; siden det koster POST, vil forespørselstypen være passende;
- this - elementvalg inne i konstruksjonen;
- attr - forkortelse for attraksjon (attraksjon), det vil si at en bestemt parameter for det valgte målet (formen) tiltrekkes;
- url - parameter ansvarlig for hvor forespørselen vil bli sendt; i dette tilfellet, hva som er skrevet i skjemaparameterne (form1.php);
- data – spesifiserer skjemadata;
- contentType - ansvarlig for å sende overskrifter til serveren; i dette tilfellet er det ikke nødvendig;
- cache - ansvarlig for å lagre brukerens cache;
- processData - ansvarlig for å konvertere data til en streng;
- success - viser resultatet av en vellykket datainnsending; derfor, hvis sendingen av data var vellykket, blir handlingene til funksjonen utført.
4. Ferdig, nå når du sender inn ajax-skjemaet, vil du motta data uten å oppdatere siden.
Resultatet kan endres ved å bruke form1.php-filen, hvor du kan spesifisere nøyaktig hva som skal vises som et resultat. For eksempel
Du kan eksperimentere og lage en sjekk for riktigheten av å angi visse data: hvis dataene ikke er korrekte, vises ønsket melding, ellers omdirigeres den til riktig side. Mange andre ting er også mulig, uansett hva hjertet begjærer.
Det sendes også data til serveren asynkront. Dette er når brukeren skriver inn tekst, og den blir umiddelbart uthevet i rødt, noe som indikerer at de angitte dataene ikke er korrekte. Om detdet finnes mange manualer på Internett, hvor alt er tydelig forklart og vist med eksempler.
Konklusjon
Ajax er utvilsomt et nyttig verktøy i nettstedbygging. For å lage sider og grensesnitt av høy kvalitet er det rett og slett nødvendig. Det er verdt å merke seg at det er veldig viktig å kjenne til jQuery for å forstå bildet og hva som er skrevet i koden, fordi en enkel copy-paste ikke alltid kan hjelpe og lære deg å forstå koden. Det er alltid verdt å huske at språkversjoner er oppdatert og noen funksjoner kan ganske enkelt forsvinne. Derfor er det kanskje ikke alle løsninger som er relevante, ofte fungerer den skrevne koden rett og slett ikke eller gir ikke det resultatet du ønsker å se på skjermen din.
