We zijn begonnen met de tutorial om de formulieren maken en verzenden via Ajax, hiervoor is het heel eenvoudig wanneer we pagina's in HTML maken formulieren maken gegevensinvoer, ofwel om ons te dienen als: Contact Formulier met de pagina of organisatie zelf, om een enquête uit te voeren, zoals registratie, enz. Het normale is dat als we dit formulier voor iets eenvoudigs willen maken, we de PHP Post-methode gebruiken om de informatie te verzenden en te kunnen bekijken, verwerken of wijzigen.
Het gebruik van deze methode in PHP heeft echter een groot nadeel, dat bij het invoeren van gegevens we de betreffende pagina moeten updaten of herladen. Daarom gaan we een methode zien waarin dat niet nodig is.
Ik bedoel een formulier gemaakt met Ajax, ook geholpen met PHP en gemaakt voor een pagina in HTML. Uiteraard moeten we onze pagina maken in HTML, onze index, die we kunnen aanpassen of personaliseren met stijlen dankzij een CSS-bestand.
Nadat we die basis hebben gemaakt, moeten we nog 2 bestanden maken, een php-bestand waarin we de gegevensinvoer door het formulier zullen bewerken en een script dat is geïmplementeerd in javascript, dat wil zeggen een .js-bestand. In dit script zullen we Ajax gebruiken om de gegevens zo te verwerken dat we onze webpagina niet opnieuw hoeven te laden, zoals het geval zou zijn als we alleen een php-methode zoals Post of get zouden gebruiken.
naast dit we zullen een jQuery-bibliotheek moeten opnemen om te kunnen interpreteren wat we met Ajax schrijven.
Om te beginnen is het belangrijk om te onthouden dat alle bestanden die we maken, ons Ajax javascript-bestand dat we operations.js zullen noemen, het CSS-stylesheetbestand dat we stijlen.css zullen noemen, als we er een gaan maken, en de bibliotheek van jQuery moeten we deze aan het begin van onze HTML-code opnemen.
Het is zo simpel als neem ze op in het hoofd van onze index.html:
…Nu gaan we een bestand maken met eenvoudige php-code die we envio.php zullen noemen, waar we de informatie verzamelen die via onze webpagina wordt verzonden. In dit geval zal de informatie voor een contactformulier zijn, zodat de gegevens naar ons eigen e-mailadres worden verzonden om de berichten van gebruikers te kunnen lezen, hoewel dit kan worden gewijzigd en naar een andere pagina of een andere plaats kan worden verzonden.
Nadat we de php-code hebben gemaakt, gaan we naar het echt interessante ding, namelijk het maken van ons operations.js-bestand waar we Ajax zullen gebruiken. Op deze manier zullen we de gegevens voor ons contactformulier verwerken zonder de pagina bij te werken zoals eerder vermeld. Eerst laten we de code zien die we in ons script moeten schrijven:
functie sendMail () {$ ("# car_send") attr ("uitgeschakeld", waar); $ (". car_error"). verwijderen (); var filter = / [A-Za-z] [A-Za-z0-9 _] * @ [A-Za-z0-9 _] + [A-Za-z0-9 _.] + [A -za- z] $ /; var s_email = $ ('# c_mail').val (); var s_name = $ ('# c_name').val (); var s_msj = $ ('# c_msg').val (); if (filter.test (s_email)) {sendMail = "true"; } else {$ ('# c_mail') na ("Vul een geldig e-mailadres in."); sendMail = "false"; } if (s_name.length == 0) {$ (‘# c_name’) after (“Voer alstublieft uw naam in.”); var sendMail = "false"; } if (s_msj.length == 0) {$ (‘# c_msg’) na (‘Voer bericht in’); var sendMail = "false"; } if (sendMail == "true") {var data = {"name": $ ('# c_name'). val (), "email": $ ('# c_mail'). val (), "bericht" : $ ('# c_msg').val ()}; $ .ajax ({data: data, url: 'sending.php', type: 'post', beforeSend: function () {$ ("# car_send"). val ("Sending …");}, succes : function (respons) {$ ('form') [0] .reset (); $ ("# car_enviar"). val ("Submit"); $ ("# c_information p"). html (respons); $ (" #c_information "). fadeIn ('slow'); $ (" # car_enviar "). removeAttr (" uitgeschakeld ");}}); } else {$ ("# car_submit"). removeAttr ("uitgeschakeld"); }} We maken de filtervariabele om te controleren of de e-mail die we invoegen geldig is, hiervoor stellen we dat het ingevoerde adres een reeks tekens is gevolgd door een at-symbool, een andere reeks tekens, een punt en meer tekens. Als het die structuur niet heeft wanneer we het bericht verzenden, zal het ons vertellen dat het niet kan worden verzonden omdat de ingevoerde e-mail niet geldig is. Als het aan de vereisten voldoet, slaat u de waarde true op in de variabele e-mail verzenden sendMail en gaat u verder met controleren.
Valideer vervolgens de lengte van de naam. Als het gelijk is aan 0, betekent dit dat we geen naam hebben ingevoerd en wordt ons gevraagd deze opnieuw in te voeren.
Het doet hetzelfde met het bericht en de lengte ervan om te controleren of we het veld niet leeg hebben gelaten.
Nadat u alle velden hebt gecontroleerd en hebt vastgesteld dat ze correct zijn, slaat u in de gegevensvariabele een array, de naam, de e-mail en het te verzenden bericht op.
Ten slotte geven we met Ajax de gegevens door en doen we verwijzing naar het bestand envio.php met behulp van de post-methode en we sturen de informatie. Voordat het wordt verzonden, verschijnt het bericht "Bezig met verzenden" totdat het proces succesvol is afgerond.
Vond je deze Tutorial leuk en heb je eraan geholpen?Je kunt de auteur belonen door op deze knop te drukken om hem een positief punt te geven
