Spustili jsme tutoriál, abychom získali vytváření a odesílání formulářů prostřednictvím Ajaxu„Když vytváříme stránky v HTML, je to velmi snadné dělat formuláře zadávání dat, buď aby nám sloužilo jako Kontaktní formulář se stránkou nebo organizací samotnou provést průzkum, jako je registrace atd. Normální je, že pokud chceme tento formulář udělat pro něco jednoduchého, použijeme k odeslání informací metodu PHP Post a budeme ji moci zobrazit, zpracovat nebo upravit.
Použití této metody v PHP má však velkou nevýhodu, že při zadávání dat máme potřebu dotyčnou stránku aktualizovat nebo znovu načíst. Proto uvidíme metodu, u které to není potřeba.
Mám na mysli formulář vytvořený pomocí Ajaxu, pomohl také s PHP a vytvořil pro stránku v HTML. Očividně musíme vytvořit naši stránku v HTML, našem indexu, který můžeme přizpůsobit nebo přizpůsobit pomocí stylů díky souboru CSS.
Po vytvoření této základny budeme muset vytvořit další 2 soubory, soubor php, kde budeme upravovat vstup dat pomocí formuláře a skript implementovaný v javascriptu, tj. Souboru .js. Právě v tomto skriptu použijeme Ajax ke zpracování dat takovým způsobem, že nebudeme muset znovu načíst naši webovou stránku, jako by se to stalo, kdybychom použili pouze metodu php, jako je Post nebo get.
kromě toho budeme muset zahrnout knihovnu jQuery abychom byli schopni interpretovat to, co píšeme s Ajaxem.
Na začátek je důležité si uvědomit, že všechny soubory, které vytváříme, náš soubor Ajax javascript, který budeme nazývat operation.js, soubor stylů css, kterému budeme říkat styles.css, pokud jej budeme vytvářet, a knihovnu jQuery, musíme ji zahrnout na začátek našeho HTML kódu.
Je to tak jednoduché jako zahrnout je do hlavy z našeho index.html:
…Nyní vytvoříme soubor s jednoduchým php kódem, který budeme nazývat envio.php, kde budeme shromažďovat informace odesílané prostřednictvím naší webové stránky. V tomto případě budou informace pro kontaktní formulář, takže data budou odeslána na naši vlastní e -mailovou adresu, aby bylo možné číst zprávy zanechané uživateli, i když to lze upravit a odeslat na jinou stránku nebo jiné místo.
Po vytvoření php kódu přejděme k opravdu zajímavé věci, kterou je vytvoření našeho souboru operation.js, kde budeme používat Ajax. Tímto způsobem budeme zpracovávat údaje pro náš kontaktní formulář bez aktualizace stránky, jak bylo uvedeno výše. Nejprve si ukážeme kód, který musíme do našeho skriptu napsat:
funkce sendMail () {$ ("# car_send"). attr ("deaktivováno", true); $ (". car_error"). remove (); var filtr = / [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 („Zadejte platný e -mail.“); sendMail = "false"; } if (s_name.length == 0) {$ (‘# c_name‘). after („Zadejte prosím své jméno.“); var sendMail = "false"; } if (s_msj.length == 0) {$ (‘# c_msg‘). after („Zadejte zprávu.“); var sendMail = "false"; } if (sendMail == "true") {var data = {"name": $ ('# c_name'). val (), "email": $ ('# c_mail'). val (), "message" : $ ('# c_msg'). val ()}; $ .ajax ({data: data, url: 'sent.php', type: 'post', beforeSend: function () {$ ("# car_send"). val ("Sending …");}, success : funkce (odpověď) {$ ('form') [0] .reset (); $ ("# car_enviar"). val ("Odeslat"); $ ("# c_information p"). html (odpověď); $ ("#c_information"). fadeIn ('slow'); $ (" # car_enviar"). removeAttr ("disabled");}}); } else {$ ("# car_submit"). removeAttr ("deaktivováno"); }} Vytvoříme proměnnou filtru, abychom ověřili, že e -mail, který vložíme, je platný, proto zadáme, že zadaná adresa je nějaká posloupnost znaků následovaná symbolem zavináč, další posloupnost znaků, tečka a další znaky. Pokud při odeslání zprávy nemá tuto strukturu, řekne nám, že ji nelze odeslat, protože zadaný e -mail není platný. Pokud splňuje požadavky, uložte hodnotu true do proměnné send e -mailu sendMail a pokračujte v kontrole.
Poté ověřte délku názvu. Pokud se rovná 0, znamená to, že jsme nezadali jméno, a požádá nás, abychom jej zadali znovu.
Totéž dělá se zprávou a její délkou, abychom zkontrolovali, zda jsme pole nenechali prázdné.
Poté, co jste zkontrolovali všechna pole a zjistili, že jsou správná, uložte datovou proměnnou, kterou je pole, jméno, e -mail a zpráva, která má být odeslána.
Nakonec s Ajaxem předáme data a uděláme to odkaz na soubor envio.php pomocí metody post a zasíláme informace. Před odesláním se zobrazí zpráva "odesílání" dokud proces úspěšně neskončí.
Líbil se vám tento návod a pomohl mu?Autora můžete odměnit stisknutím tohoto tlačítka, čímž mu dáte kladný bod
