Rozpoczęliśmy samouczek, aby uzyskać tworzenie i przesyłanie formularzy przez Ajax, do tego kiedy tworzymy strony w HTML jest to bardzo proste tworzyć formularze wprowadzanie danych, aby służyć nam jako Formularz kontaktowy z samą stroną lub organizacją w celu przeprowadzenia ankiety, takiej jak rejestracja itp. Normalną rzeczą jest to, że jeśli chcemy, aby ten formularz był prosty, używamy metody PHP Post do wysyłania informacji i umożliwienia ich przeglądania, przetwarzania lub modyfikowania.
Jednak zastosowanie tej metody w PHP ma wielką wadę, że wprowadzając dane mamy potrzebę aktualizacji lub przeładowania danej strony. Dlatego zobaczymy metodę, w której nie ma takiej potrzeby.
Mam na myśli formularz stworzony w Ajaksie, pomógł też w PHP i stworzony dla strony w HTML. Oczywiście musimy stworzyć naszą stronę w HTML, naszym indeksie, który możemy dostosować lub personalizować za pomocą stylów dzięki plikowi CSS.
Po utworzeniu tej bazy będziemy musieli utworzyć kolejne 2 pliki, plik php, w którym będziemy edytować dane wprowadzane przez formularz oraz skrypt zaimplementowany w javascript, czyli plik .js. To właśnie w tym skrypcie użyjemy Ajax do przetwarzania danych w taki sposób, że nie musimy przeładowywać naszej strony internetowej, jak by się stało, gdybyśmy użyli tylko metody php, takiej jak Post lub get.
poza tym będziemy musieli dołączyć bibliotekę jQuery aby móc zinterpretować to, co piszemy w Ajaksie.
Na początek ważne jest, aby pamiętać, że wszystkie tworzone przez nas pliki, nasz plik javascript Ajax, który nazwiemy operacją.js, plik arkusza stylów css, który nazwiemy styles.css, jeśli mamy zamiar go utworzyć, oraz bibliotekę jQuery musimy ją zawrzeć na początku naszego kodu HTML.
To tak proste, jak uwzględnij je w głowie z naszego index.html:
…Teraz stworzymy plik z prostym kodem php, który nazwiemy envio.php, gdzie będziemy zbierać informacje przesyłane przez naszą stronę internetową. W tym przypadku informacja będzie dotyczyła formularza kontaktowego, więc dane zostaną przesłane na nasz własny adres e-mail, aby móc czytać wiadomości pozostawione przez użytkowników, choć można to zmodyfikować i wysłać na inną stronę lub inne miejsce.
Po stworzeniu kodu php przejdźmy do naprawdę ciekawej rzeczy, czyli stworzenia naszego pliku operacji.js, w którym wykorzystamy Ajax. W ten sposób będziemy przetwarzać dane do naszego formularza kontaktowego bez aktualizowania strony, jak podano wcześniej. Najpierw pokażemy kod, który musimy napisać w naszym skrypcie:
function sendMail () {$ ("# car_send"). attr ("wyłączone", prawda); $ (". car_error"). usuń (); 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 = "prawda"; } else {$ („# c_mail”) after („Wprowadź poprawny adres e-mail.”); sendMail = "fałsz"; } if (s_name.length == 0) {$ („# c_name”) after („Proszę podać swoje imię i nazwisko.”); var sendMail = "fałsz"; } if (s_msj.length == 0) {$ (‘# c_msg’).after ("Wprowadź wiadomość."); var sendMail = "fałsz"; } 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 ("Wysyłanie…");}, sukces : function (odpowiedź) {$ ('formularz') [0] .reset (); $ ("# car_enviar"). val ("Prześlij"); $ ("# c_information p"). html (odpowiedź); $ (" #c_information "). fadeIn ('slow'); $ (" # car_enviar "). removeAttr (" disabled ");}}); } else {$ ("# car_submit"). removeAttr ("wyłączone"); }} Tworzymy zmienną filtrującą, aby sprawdzić, czy wstawiony przez nas adres e-mail jest prawidłowy, w tym celu wstawiamy, że wprowadzony adres to pewna sekwencja znaków, po której następuje symbol at, inna sekwencja znaków, kropka i więcej znaków. Jeśli nie ma takiej struktury, gdy wysyłamy wiadomość, powie nam, że nie można jej wysłać, ponieważ wprowadzony adres e-mail jest niepoprawny. Jeśli spełnia wymagania, zapisz wartość true w zmiennej send email sendMail i kontynuuj sprawdzanie.
Następnie sprawdź długość nazwy. Jeśli jest równe 0, oznacza to, że nie wpisaliśmy nazwy i prosi nas o ponowne wpisanie.
To samo robi z wiadomością i jej długością, aby sprawdzić, czy nie pozostawiliśmy pustego pola.
Po sprawdzeniu wszystkich pól i stwierdzeniu, że są poprawne, zapisz w zmiennej data, która jest tablicą, nazwę, e-mail i wiadomość do wysłania.
Wreszcie, z Ajaxem, przekazujemy dane i robimy odwołanie do pliku envio.php przy użyciu metody post i wysyłamy informacje. Przed wysłaniem pojawia się wiadomość "wysyłanie" do momentu pomyślnego zakończenia procesu.
Podobał Ci się i pomógł ten samouczek?Możesz nagrodzić autora, naciskając ten przycisk, aby dać mu pozytywny punkt
