Sayfanın yeniden yüklenmesi ve alanlara girilen karakterlerin tamamen silinmesi nedeniyle yanlış veri girdiğiniz gerçeğiyle kaç kez karşılaştınız. Bunu düzeltmek için, bir kullanıcı arayüzü oluşturmaya yönelik oldukça popüler bir yaklaşım vardır ve adı ajax'tır. Birçok projede karşımıza çıkıyor ve birçok şekilde kullanılıyor.
Bir ajax formu gönderme: kitaplıkları bağlama
jquery kitaplığını index.php'ye dahil edin.
Belgeye jquery eklemenin başka bir yolu daha vardır. Kütüphaneyi jquery resmi sitesinden indirmeniz, doğru klasöre yerleştirmeniz ve bağlantıyı şu şekilde yapıştırmanız gerekiyor:
Belgeleri bağlama ve ayarlama
1. Sitenin bulunduğu klasörde sizin için uygun olan herhangi bir adla bir.php belgesi oluşturun - bu, ajax php formunu gönderecektir. İçinde mesajın bulunduğu metnin hangi formatta görüntüleneceğini yazabilirsiniz. Örneğin, form1.php.
2. Javascript dosyaları klasörünüzde bir.js dosyası oluşturun.herhangi bir uygun isim. Örneğin, form.js.
3. Bu klasörü belgenize bağlayın.
4. Aşağıdaki parametrelerle bir form oluşturun:
İçinde, verilerinizi girmek için alanlar oluşturmayı unutmayın.
5. Sitenin bulunduğu dizindeki form1.php dosyasına gidin, şunu yazın:
Şimdi, formu gönderirken tarayıcı verilerle ilgili bilgileri gösterecek.
Aynı dosyada tam olarak ne görüntüleneceğini veya nasıl görüntüleneceğini yazabilirsiniz. Ayrıca buraya döngüler veya algoritmalar da yazabilirsiniz.
ajax jquery formu gönderme
1. Oluşturulan form.js dosyasına site sayfası tamamen yüklendikten sonra dosyanın çalışması için sorumlu olan kodu yazmanız gerekmektedir.
$(belge).ready(function(){ //Bir sonraki kodumuz burada çalışacak });
2. Ardından gönder düğmesini özelleştirmeniz gerekir. Hepsini aynı dosyada yapın.
$("form").submit(function(event) { event.preventDefault(); //buraya aşağıdaki kod yazılacaktır });
Kodun ilk kısmı sayfadaki öğeyi seçmekten, ikincisi ise varsayılan eylemi engellemekten sorumludur.
3. Ardından, örneğin, başarı durumunda bir ajax formu gönderimi yapın.
$.ajax({ tür: $(bu).attr('yöntem'), url: $(bu).attr('eylem'), veri: yeni FormData(bu), contentType: false, cache: false, processData: false, başarı: function(result){ alert(result); } });
Aşağıdakiler, her bir ayarın ayrıntılı açıklamalarıdır.
- tür -bu, formda gönderilen talep türüdür; POST maliyeti olduğundan, istek türü uygun olacaktır;
- bu - yapı içinde eleman seçimi;
- attr - cazibe (cazibe) için kısa, yani seçilen hedefin (form) belirli bir parametresi çekilir;
- url - isteğin nereye gönderileceğinden sorumlu parametre; bu durumda form parametrelerinde ne yazıyorsa (form1.php);
- data - form verilerini belirtir;
- contentType - sunucuya başlık göndermekten sorumludur; bu durumda gerekli değildir;
- cache - kullanıcının önbelleğini kaydetmekten sorumludur;
- processData - verileri bir dizgeye dönüştürmekten sorumludur;
- success - başarılı bir veri gönderiminin sonucunu görüntüler; bu nedenle, veri gönderme başarılıysa, işlevin eylemleri yürütülür.
4. Bitti, şimdi ajax formunu gönderirken sayfayı yenilemeden veri alacaksınız.
Sonuç, sonuç olarak tam olarak neyin görüntüleneceğini belirtebileceğiniz form1.php dosyası kullanılarak değiştirilebilir. Örneğin, Belirli verileri girmenin doğruluğunu deneyebilir ve kontrol edebilirsiniz: veriler doğru değilse istenen mesaj görüntülenir, aksi takdirde doğru sayfaya yönlendirilir. Kalbiniz ne isterse, başka birçok şey de mümkündür.
Sunucuya eşzamansız olarak veri gönderme de var. Bu, kullanıcının metin girdiği zamandır ve girilen verilerin doğru olmadığını belirtmek için hemen kırmızıyla vurgulanır. Hakkındaİnternette her şeyin net bir şekilde açıklandığı ve örneklerle gösterildiği birçok kılavuz var.
Sonuç
Şüphesiz, ajax web sitesi oluşturmada faydalı bir araçtır. Yüksek kaliteli sayfalar ve arayüzler yapmak için basitçe gereklidir. Resmi ve kodda ne yazdığını tam olarak anlamak için jQuery'yi bilmenin çok önemli olduğunu belirtmekte fayda var, çünkü basit bir kopyala-yapıştır her zaman size kodu anlamayı öğretemez ve yardımcı olamaz. Dil sürümlerinin güncellendiğini ve bazı özelliklerin kolayca kaybolabileceğini her zaman hatırlamakta fayda var. Bu nedenle, tüm çözümler alakalı olmayabilir, genellikle yazılı kod çalışmaz veya ekranınızda görmek istediğiniz sonucu üretmez.
