Abbiamo iniziato il tutorial per ottenere il creazione e invio di moduli tramite Ajax, per questo quando creiamo pagine in HTML è molto semplice creare forme inserimento dati, sia per servirci come Modulo di Contatto con la pagina o l'organizzazione stessa, per svolgere un sondaggio, come la registrazione, ecc. La cosa normale è che se vogliamo creare questo modulo per qualcosa di semplice, utilizziamo il metodo PHP Post per inviare le informazioni ed essere in grado di visualizzarle, elaborarle o modificarle.
Tuttavia, l'uso di questo metodo in PHP ha un grande svantaggio, che quando si inseriscono i dati abbiamo la necessità di aggiornare o ricaricare la pagina in questione. Ecco perché vedremo un metodo in cui non ce n'è bisogno.
Intendo un form creato con Ajax, aiutato anche con PHP e creato per una pagina in HTML. Ovviamente dobbiamo creare la nostra pagina in HTML, il nostro indice, che possiamo personalizzare o personalizzare con stili grazie a un file CSS.
Dopo aver creato quella base dovremo creare altri 2 file, un file php dove modificheremo i dati inseriti dal form e uno script implementato in javascript, cioè un file .js. È in questo script che utilizzeremo Ajax per elaborare i dati in modo tale da non dover ricaricare la nostra pagina Web come accadrebbe se utilizzassimo solo un metodo php come Post o get.
oltre a questo dovremo includere una libreria jQuery poter interpretare ciò che scriviamo con Ajax.
Per cominciare è importante ricordare che tutti i file che creiamo, il nostro file javascript Ajax che chiameremo operation.js, il file del foglio di stile css che chiameremo styles.css, se ne creeremo uno, e il libreria di jQuery dobbiamo includerla all'inizio del nostro codice HTML.
È semplice come includerli nella testa dal nostro index.html:
…Ora creeremo un file con un semplice codice php che chiameremo envio.php dove raccoglieremo le informazioni che vengono inviate tramite la nostra pagina web. In questo caso, le informazioni saranno per un modulo di contatto quindi i dati verranno inviati al nostro indirizzo di posta elettronica per poter leggere i messaggi lasciati dagli utenti, anche se questo potrebbe essere modificato e inviarlo a un'altra pagina o un altro luogo.
Dopo aver creato il codice php, passiamo alla cosa davvero interessante che è la creazione del nostro file operation.js dove utilizzeremo Ajax. In questo modo tratteremo i dati per il nostro modulo di contatto senza aggiornare la pagina come precedentemente indicato. Per prima cosa mostreremo il codice che dobbiamo scrivere nel nostro script:
funzione sendMail() {$ ("# car_send") attr ("disabilitato", true); $ (". auto_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 = "true"; } else {$ ('# c_mail'). after ("Inserisci email valida."); sendMail = "falso"; } if (s_name.length == 0) {$ ('# c_name') after ("Per favore inserisci il tuo nome."); var sendMail = "falso"; } if (s_msj.length == 0) {$ ('# c_msg') after ("Inserisci messaggio."); var sendMail = "falso"; } if (sendMail == "true") {var data = {"name": $ ('# c_name'). val(), "email": $ ('# c_mail'). val(), "message" : $ ('# c_msg').val()}; $ .ajax ({data: data, url: 'sending.php', type: 'post', beforeSend: function () {$ ("# car_send"). val ("Sending …");}, success : function (risposta) {$ ('form') [0] .reset (); $ ("# car_enviar"). val ("Submit"); $ ("# c_information p"). html (risposta); $ (" #c_information "). fadeIn ('slow'); $ (" # car_enviar "). removeAttr (" disabilitato ");}}); } else {$ ("# car_submit") removeAttr ("disabilitato"); }} Creiamo la variabile filtro per verificare che l'e-mail che inseriamo sia valida, per questo mettiamo che l'indirizzo inserito sia una sequenza di caratteri seguita da un simbolo at, un'altra sequenza di caratteri, un punto e più caratteri. Se non ha quella struttura quando inviamo il messaggio, ci dirà che non può essere inviato poiché l'e-mail inserita non è valida. Se soddisfa i requisiti, archivia il valore true nella variabile di invio email sendMail e continua a controllare.
Quindi convalidare la lunghezza del nome. Se è uguale a 0 significa che non abbiamo inserito un nome e ci chiede di inserirlo nuovamente.
Fa lo stesso con il messaggio e la sua lunghezza per verificare che non abbiamo lasciato il campo vuoto.
Dopo aver controllato tutti i campi e aver visto che sono corretti, salvare nella variabile dati che è un array, il nome, l'email e il messaggio da inviare.
Infine, con Ajax, passiamo i dati e facciamo riferimento al file envio.php utilizzando il metodo post e inviamo le informazioni. Prima di essere inviato, viene visualizzato il messaggio "invio" fino a quando il processo non si conclude con successo.
Ti è piaciuto e hai aiutato questo Tutorial?Puoi premiare l'autore premendo questo pulsante per dargli un punto positivo
