Hur många gånger har du stött på det faktum att du angett felaktiga uppgifter, på grund av vilket sidan laddades om och helt raderade tecknen som angavs i fälten. För att fixa detta finns det ett ganska populärt sätt att bygga ett användargränssnitt, och dess namn är ajax. Det förekommer i många projekt och används på många sätt.
Skicka ett ajax-formulär: ansluta bibliotek
Inkludera jquery-biblioteket i index.php.
Det finns ett annat sätt att inkludera jquery i ett dokument. Du måste ladda ner biblioteket från jquerys officiella webbplats, placera det i rätt mapp och klistra in länken till det så här:
Ansluta och ställa in dokument
1. Skapa ett.php-dokument i mappen med webbplatsen med vilket namn som helst som passar dig - detta kommer att skicka ajax php-formuläret. I den kan du skriva i vilket format texten med meddelandet kommer att visas. Till exempel, form1.php.
2. Skapa en.js-fil med i mappen för javascript-filernågot lämpligt namn. Till exempel form.js.
3. Anslut den här mappen till ditt dokument.
4. Skapa ett formulär med följande parametrar:
I den, glöm inte att skapa fält för att ange dina data.
5. Gå till filen form1.php i katalogen med webbplatsen, där skriv:
När du skickar in formuläret kommer webbläsaren att visa information om data.
I samma fil kan du skriva exakt vad som ska visas eller hur. Du kan också skriva cykler eller algoritmer här.
Skicka ajax jquery-formulär
1. I den skapade form.js-filen måste du skriva koden som är ansvarig för att filen fungerar efter att webbplatssidan är fulladdad.
$(document).ready(function(){ //Vår nästa kod kommer att köras här });
2. Sedan måste du anpassa knappen Skicka. Gör allt i samma fil.
$("form").submit(function(event) { event.preventDefault(); //följande kod kommer att skrivas här });
Den första delen av koden är ansvarig för att välja elementet på sidan, och den andra är ansvarig för att förhindra standardåtgärden.
3. Ta sedan till exempel ett ajax-formulär om framgång.
$.ajax({ typ: $(this).attr('metod'), url: $(this).attr('action'), data: new FormData(this), contentType: false, cache: false, processData: false, success: function(result){ alert(result); } });
Följande är detaljerade beskrivningar av varje inställning.
- typ -detta är den typ av begäran som lämnas in i formuläret; eftersom det kostar POST kommer förfrågningstypen att vara lämplig;
- this - elementval inuti konstruktionen;
- attr - förkortning för attraktion (attraktion), det vill säga en viss parameter för det valda målet (formen) attraheras;
- url - parameter ansvarig för var begäran kommer att skickas; i det här fallet, vad som skrivs i formulärparametrarna (form1.php);
- data – specificerar formulärdata;
- contentType - ansvarig för att skicka rubriker till servern; i det här fallet behövs det inte;
- cache - ansvarig för att spara användarens cache;
- processData - ansvarig för att konvertera data till en sträng;
- framgång - visar resultatet av en lyckad datainlämning; därför, om sändningen av data lyckades, exekveras åtgärderna för funktionen.
4. Klart, nu när du skickar in ajax-formuläret kommer du att få data utan att uppdatera sidan.
Resultatet kan ändras med form1.php-filen, där du kan specificera exakt vad som ska visas som resultat. Till exempel
Du kan experimentera och skapa en kontroll för att ange viss data korrekt: om uppgifterna inte är korrekta visas det önskade meddelandet, annars omdirigeras det till rätt sida. Många andra saker är också möjliga, vad du än vill.
Det skickas också asynkront data till servern. Det är när användaren skriver in text, och den markeras omedelbart i rött, vilket indikerar att den angivna informationen inte är korrekt. Om detdet finns många manualer på Internet, där allt är tydligt förklarat och visat med exempel.
Slutsats
Ajax är utan tvekan ett användbart verktyg för att bygga webbsidor. För att göra sidor och gränssnitt av hög kvalitet är det helt enkelt nödvändigt. Det är värt att notera att det är mycket viktigt att känna till jQuery för att helt förstå bilden och vad som står i koden, eftersom en enkel copy-paste inte alltid kan hjälpa och lära dig att förstå koden. Det är alltid värt att komma ihåg att språkversionerna är uppdaterade och vissa funktioner kan helt enkelt försvinna. Därför kanske inte alla lösningar är relevanta, ofta fungerar den skrivna koden helt enkelt inte eller ger inte det resultat som du skulle vilja se på din skärm.
