Almak için öğreticiye başladık Ajax aracılığıyla form oluşturma ve gönderme, bunun için HTML'de sayfalar oluşturduğumuzda çok kolay formlar yapmak veri girişi, ya bize hizmet etmek için İletişim Formu kayıt vb. gibi bir anket yapmak için sayfanın veya kuruluşun kendisiyle birlikte. Normal olan, bu formu basit bir şey için yapmak istiyorsak, bilgiyi göndermek ve onu görüntüleyebilmek, işleyebilmek veya değiştirebilmek için PHP Post yöntemini kullanmamızdır.
Ancak, bu yöntemin PHP'de kullanılmasının büyük bir dezavantajı vardır, veri girerken söz konusu sayfayı güncelleme veya yeniden yükleme ihtiyacı duyarız. Bu yüzden buna gerek olmayan bir yöntem göreceğiz.
Ajax ile oluşturulmuş, PHP'ye de yardımcı olmuş ve HTML'de bir sayfa için oluşturulmuş bir form demek istiyorum. Açıkçası sayfamızı bir CSS dosyası sayesinde özelleştirebileceğimiz veya stiller ile kişiselleştirebileceğimiz dizinimiz olan HTML'de oluşturmamız gerekiyor.
Bu tabanı oluşturduktan sonra 2 dosya daha oluşturmamız gerekecek, veri girişini forma göre düzenleyeceğimiz bir php dosyası ve javascript'te uygulanan bir komut dosyası, yani bir .js dosyası. Bu komut dosyasında, verileri yalnızca Post veya get gibi bir php yöntemi kullanırsak olacağı gibi web sayfamızı yeniden yüklememize gerek kalmayacak şekilde işlemek için Ajax kullanacağız.
Ayrıca bir jQuery kitaplığı eklememiz gerekecek Ajax ile yazdıklarımızı yorumlayabilmek.
Öncelikle, oluşturduğumuz tüm dosyaların, Operation.js adını vereceğimiz Ajax javascript dosyamızın, eğer oluşturacaksak style.css adını vereceğimiz css stylesheet dosyamızın ve jQuery kütüphanesini HTML kodumuzun başına eklemeliyiz.
bu kadar basit onları kafaya dahil et index.html dosyamızdan:
…Şimdi envio.php adını vereceğimiz basit php kodlu bir dosya oluşturacağız ve burada web sayfamız üzerinden gönderilen bilgileri toplayacağız. Bu durumda, bilgiler bir iletişim formu için olacaktır, bu nedenle veriler, kullanıcılar tarafından bırakılan mesajları okuyabilmek için kendi e-posta adresimize gönderilecektir, ancak bu değiştirilebilir ve başka bir sayfaya veya başka bir yere gönderilebilir.
Php kodunu oluşturduktan sonra asıl enteresan olana, Ajax kullanacağımız Operation.js dosyamızın oluşturulmasına geçelim. Bu şekilde, daha önce belirtildiği gibi sayfayı güncellemeden iletişim formumuza ait verileri işleyeceğiz. Öncelikle scriptimize yazmamız gereken kodu göstereceğiz:
function sendMail () {$ ("# car_send").attr ("devre dışı", true); $(".car_error").kaldır(); var filtre = / [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 ("Geçerli bir e-posta girin."); sendMail = "yanlış"; } if (s_name.length == 0) {$ (‘# c_name’) after ("Lütfen adınızı giriniz."); var sendMail = "yanlış"; } if (s_msj.length == 0) {$ ('# c_msg') after ("Mesajı girin."); var sendMail = "yanlış"; } if (sendMail == "true") {var data = {"name": $ ('# c_name'). val (), "email": $ ('# c_mail'). val (), "message" : $ ('# c_msg').val()}; $ .ajax ({veri: veri, url: 'sending.php', yazın: 'post', BeforeSend: function () {$ ("# car_send"). val ("Gönderiliyor …");}, başarı : function (yanıt) {$ ('form') [0] .reset (); $ ("# car_enviar"). val ("Gönder"); $ ("# c_information p").html (yanıt); $ (" #c_information "). fadeIn ('yavaş'); $ (" # car_enviar "). removeAttr (" devre dışı ");}}); } else {$ ("# car_submit") removeAttr ("devre dışı"); }} Eklediğimiz e-postanın geçerli olduğunu doğrulamak için filtre değişkenini oluştururuz, bunun için girilen adresin bir karakter dizisi ve ardından bir at sembolü, başka bir karakter dizisi, bir nokta ve daha fazla karakter olduğunu koyarız. Mesajı gönderdiğimizde o yapıya sahip değilse, girilen e-posta geçerli olmadığı için bize gönderilemeyeceğini söyleyecektir. Gereksinimleri karşılıyorsa, true değerini sendMail gönder değişkeninde saklayın ve kontrol etmeye devam edin.
Ardından adın uzunluğunu doğrulayın. 0'a eşitse, bir isim girmediğimiz anlamına gelir ve bizden tekrar girmemizi ister.
Alanı boş bırakmadığımızı kontrol etmek için mesaj ve uzunluğu ile aynı şeyi yapar.
Tüm alanları kontrol ettikten ve doğru olduklarını gördükten sonra, bir dizi olan data değişkenine, adı, e-postayı ve gönderilecek mesajı kaydedin.
Son olarak, Ajax ile verileri iletiyoruz ve post yöntemini kullanarak envio.php dosyasına referans ve bilgileri gönderiyoruz. Gönderilmeden önce mesaj görünür "gönderme" süreç başarıyla bitene kadar.
Bu Eğitimi beğendiniz ve yardım ettiniz mi?Yazara olumlu puan vermek için bu düğmeye basarak yazarı ödüllendirebilirsiniz.
