Hoe vaak ben je het feit tegengekomen dat je onjuiste gegevens hebt ingevoerd, waardoor de pagina opnieuw is geladen en de tekens in de velden volledig zijn verwijderd. Om dit op te lossen, is er een redelijk populaire benadering voor het bouwen van een gebruikersinterface, en de naam is ajax. Het verschijnt in veel projecten en wordt op veel manieren gebruikt.
Een ajax-formulier verzenden: bibliotheken verbinden
Neem de jQuery-bibliotheek op in index.php.
Er is een andere manier om jQuery in een document op te nemen. Je moet de bibliotheek downloaden van de officiële jQuery-site, deze in de juiste map plaatsen en de link ernaartoe plakken als volgt:
Documenten verbinden en instellen
1. Maak een.php-document in de map met de site met een naam die voor u geschikt is - dit zal het ajax php-formulier verzenden. Daarin kunt u schrijven in welk formaat de tekst met het bericht wordt weergegeven. Bijvoorbeeld form1.php.
2. Maak in uw map met javascript-bestanden een.js-bestand meteen willekeurige naam. Bijvoorbeeld form.js.
3. Verbind deze map met uw document.
4. Maak een formulier met de volgende parameters:
Vergeet niet om velden aan te maken voor het invoeren van uw gegevens.
5. Ga naar het bestand form1.php in de directory met de site, waarin schrijf:
Nu, bij het indienen van het formulier, zal de browser informatie over de gegevens weergeven.
In hetzelfde bestand kun je schrijven wat er precies wordt weergegeven of hoe. U kunt hier ook cycli of algoritmen schrijven.
Ajax jquery-formulier verzenden
1. In het aangemaakte form.js-bestand moet u de code schrijven die ervoor zorgt dat het bestand werkt nadat de sitepagina volledig is geladen.
$(document).ready(function(){ //Onze volgende code wordt hier uitgevoerd });
2. Vervolgens moet u de verzendknop aanpassen. Doe het allemaal in hetzelfde bestand.
$("form").submit(function(event) { event.preventDefault(); //de volgende code wordt hier geschreven });
Het eerste deel van de code is verantwoordelijk voor het selecteren van het element op de pagina, en het tweede deel is verantwoordelijk voor het voorkomen van de standaardactie.
3. Neem dan bijvoorbeeld een ajax-formulierinzending bij succes.
$.ajax({ type: $(this).attr('methode'), url: $(this).attr('action'), data: new FormData(this), contentType: false, cache: false, processData: false, succes: functie (resultaat) {waarschuwing (resultaat); } });
Hier volgen gedetailleerde beschrijvingen van elke instelling.
- type -dit is het type verzoek dat in het formulier wordt ingediend; aangezien het POST kost, is het verzoektype geschikt;
- this - elementselectie binnen de constructie;
- attr - afkorting voor attractie (attractie), dat wil zeggen, een bepaalde parameter van het geselecteerde doel (vorm) wordt aangetrokken;
- url - parameter die verantwoordelijk is voor waar het verzoek naartoe wordt gestuurd; in dit geval, wat is geschreven in de formulierparameters (form1.php);
- data - specificeert formuliergegevens;
- contentType - verantwoordelijk voor het verzenden van headers naar de server; in dit geval is het niet nodig;
- cache - verantwoordelijk voor het opslaan van de cache van de gebruiker;
- processData - verantwoordelijk voor het converteren van gegevens naar een string;
- success - geeft het resultaat weer van een succesvolle gegevensindiening; daarom, als het verzenden van gegevens succesvol was, worden de acties van de functie uitgevoerd.
4. Klaar, nu wanneer u het ajax-formulier indient, ontvangt u gegevens zonder de pagina te vernieuwen.
Het resultaat kan worden gewijzigd met behulp van het bestand form1.php, waar u kunt specificeren wat er precies als resultaat wordt weergegeven. Bijvoorbeeld
Je kunt experimenteren en een controle maken op de juistheid van het invoeren van bepaalde gegevens: als de gegevens niet correct zijn, wordt het gewenste bericht weergegeven, anders wordt het doorgestuurd naar de juiste pagina. Er zijn ook veel andere dingen mogelijk, wat je hartje begeert.
Er worden ook asynchroon gegevens naar de server verzonden. Dit is wanneer de gebruiker tekst invoert en deze wordt onmiddellijk rood gemarkeerd om aan te geven dat de ingevoerde gegevens niet correct zijn. Over heter zijn veel handleidingen op internet, waar alles duidelijk wordt uitgelegd en getoond met voorbeelden.
Conclusie
Ajax is ongetwijfeld een handig hulpmiddel bij het bouwen van websites. Om pagina's en interfaces van hoge kwaliteit te maken, is het gewoon nodig. Het is vermeldenswaard dat het erg belangrijk is om jQuery te kennen om de afbeelding en wat er in de code is geschreven volledig te begrijpen, omdat een simpele copy-paste niet altijd kan helpen en u kan leren de code te begrijpen. Het is altijd de moeite waard om te onthouden dat taalversies worden bijgewerkt en dat sommige functies gewoon kunnen verdwijnen. Daarom zijn mogelijk niet alle oplossingen relevant, vaak werkt de geschreven code gewoon niet of levert niet het resultaat op dat u op uw scherm zou willen zien.
