Am început tutorialul pentru a obține crearea și trimiterea formularelor prin Ajax, pentru aceasta atunci când creăm pagini în HTML este foarte ușor fă forme introducerea datelor, fie pentru a ne servi ca Formular de contact cu pagina sau organizația în sine, pentru a efectua un sondaj, cum ar fi înregistrarea etc. Normal este că, dacă dorim să facem acest formular pentru ceva simplu, folosim metoda PHP Post pentru a trimite informațiile și a le putea vizualiza, procesa sau modifica.
Cu toate acestea, utilizarea acestei metode în PHP are un mare dezavantaj, că atunci când introducem date avem nevoie să actualizăm sau să reîncărcăm pagina în cauză. De aceea vom vedea o metodă în care nu este nevoie de ea.
Mă refer la un formular creat cu Ajax, ajutat și cu PHP și creat pentru o pagină în HTML. Evident, trebuie să ne creăm pagina în HTML, indexul nostru, pe care îl putem personaliza sau personaliza cu stiluri datorită unui fișier CSS.
După crearea acelei baze, va trebui să creăm încă 2 fișiere, un fișier php în care vom edita datele introduse de formular și un script implementat în javascript, adică un fișier .js. În acest script vom folosi Ajax pentru a procesa datele în așa fel încât să nu avem nevoie să reîncărcăm pagina noastră web, așa cum s-ar întâmpla dacă am folosi doar o metodă php precum Post sau get.
în afară de aceasta va trebui să includem o bibliotecă jQuery pentru a putea interpreta ceea ce scriem cu Ajax.
Pentru început, este important să ne amintim că toate fișierele pe care le creăm, fișierul nostru Ajax javascript pe care îl vom numi operation.js, fișierul CSS pe care îl vom numi styles.css, dacă vom crea unul, și biblioteca de jQuery trebuie să o includem la începutul codului nostru HTML.
Este la fel de simplu ca include-le în cap din index.html:
…Acum vom crea un fișier cu cod php simplu pe care îl vom numi envio.php unde vom colecta informațiile trimise prin pagina noastră web. În acest caz, informațiile vor fi pentru un formular de contact, astfel încât datele vor fi trimise la propria noastră adresă de e-mail pentru a putea citi mesajele lăsate de utilizatori, deși acest lucru ar putea fi modificat și trimis către o altă pagină sau alt loc.
După crearea codului php, să mergem la lucrul cu adevărat interesant, care este crearea fișierului nostru operation.js unde vom folosi Ajax. În acest fel, vom procesa datele pentru formularul nostru de contact fără a actualiza pagina așa cum s-a menționat anterior. Mai întâi vom arăta codul pe care trebuie să-l scriem în scriptul nostru:
funcția sendMail () {$ ("# car_send"). attr ("dezactivat", adevărat); $ (". car_error"). remove (); 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 = "adevărat"; } else {$ (‘# c_mail’). after („Introduceți un e-mail valid.”); sendMail = "fals"; } if (s_name.length == 0) {$ (‘# c_name’). after („Vă rugăm să introduceți numele dvs.”); var sendMail = "false"; } if (s_msj.length == 0) {$ (‘# c_msg’). after („Introduceți mesajul”.); var sendMail = "fals"; } if (sendMail == "true") {var data = {"name": $ ('# c_name'). val (), "email": $ ('# c_mail'). val (), "message" : $ ('# c_msg'). val ()}; $ .ajax ({data: data, url: 'Send.php', tastați: 'post', beforeSend: function () {$ ("# car_send"). val ("Sending …");}, succes : function (response) {$ ('form') [0] .reset (); $ ("# car_enviar"). val ("Submit"); $ ("# c_information p"). html (response); $ ("#c_information"). fadeIn ('slow'); $ ("# car_enviar"). removeAttr ("disabled");}}); } else {$ ("# car_submit"). removeAttr ("disabled"); }} Creăm variabila de filtrare pentru a verifica dacă e-mailul pe care îl inserăm este valid, pentru aceasta punem că adresa introdusă este o secvență de caractere urmată de un simbol at, o altă secvență de caractere, o perioadă și mai multe caractere. Dacă nu are structura respectivă atunci când trimitem mesajul, ne va spune că nu poate fi trimis deoarece e-mailul introdus nu este valid. Dacă îndeplinește cerințele, stocați valoarea true în variabila send email sendMail și continuați să verificați.
Apoi validați lungimea numelui. Dacă este egal cu 0, înseamnă că nu am introdus un nume și ne cere să îl introducem din nou.
Face același lucru cu mesajul și lungimea acestuia pentru a verifica dacă nu am lăsat câmpul necompletat.
După ce ați verificat toate câmpurile și ați văzut că sunt corecte, salvați în variabila de date care este o matrice, numele, e-mailul și mesajul care urmează să fie trimis.
În cele din urmă, cu Ajax, transmitem datele și facem referință la fișierul envio.php folosind metoda post și trimitem informațiile. Înainte de a fi trimis, apare mesajul „trimitere” până când procesul se încheie cu succes.
V-a plăcut și ați ajutat acest tutorial?Puteți recompensa autorul apăsând acest buton pentru a-i oferi un punct pozitiv
