Ajax ile Formdaki Tüm Elemanları Post Etme

  • 26 Aralık 2016
  • 4 Okunma
  • 4 Yorum
  • 4 DK

Merhabalar Yazılım Severler,

Bugün bir çok yazılımcının uğraşmaktan kaçındığı sevmediği bir işlem için bir ipuçu vermek istiyorum. Ben şahsen formlarla uğraşmayı pek sevmem çünkü hepsinin ayrı ayrı kontrolleri vs oluyor ne kadar jquery kütüphanesi kullansakta bazen işler umduğumuz gibi gitmiyor.

Şimdi lafı çok uzatmadan koda dönmek istiyorum. Bir çok yazılımcı bir form hazırlayıp bunu jquery ile kontrollerini yapıp gerekli dosyaya sayfa yenilenmeden post etme işlemini ajax methodu veya $.post metodu ile yapıyor ama bazen öyle bir durumlar oluyor ki o formun içerisinde dosya da upload etmemiz gerekiyor. İşte burada işler karışıyor. Normalde serialize fonksiyonunu kullansanda file inputunun değerini almıyor çünkü alınan değer diğer inputlar gibi tekli değer değil. Biz dizi çıktısı alınıyor ve gelen değer dosya boyutu olduğu için normal bir string yapıya sahip değil. Sorunu anlattığıma göre şimdi çözüme geçiyoruz.

 var formData = new FormData($('.hayatikodla form')[0]); 

Yukarıdaki tek satırlık kod aslında bizim çözümümüz. Javascript ile yapay bir form oluşturuyoruz ve bizim form verilerimizi bu yapay form değişkenine tanımlıyoruz ve böylece tüm form elemanlarının değerlerini alabiliyoruz. Şimdi bunu bir örnek ile inceleyelim.

 var formData = new FormData($('.hayatikodla form')[0]); //Tüm form elemanlarını yapay form dizine aktardık $.ajax({ url: 'https://www.hayatikodla.com/dosyayolu.php', type: 'POST', dataType : 'json', success: function(e){ //gelen sonuca göre işlem yapma }, data: formData, //Tüm elemanların olduğu form değişkeni. cache: false, contentType: false, processData: false }); 

Yukarıdaki örnekte yorum satırlarıyla anlatmaya çalıştım. Anlamadığınız sormak istediğiniz kısımları yorum olarak atabilirsiniz.

Ajax ile Formdaki Tüm Elemanları Post Etme Etiketleri:

HAYATI KODLA'YA ABONE OLUN!!
ETKİLEYİCİ BİR YORUM BIRAK

Ajax ile Formdaki Tüm Elemanları Post Etme İle Benzer Yazılar

"Ajax ile Formdaki Tüm Elemanları Post Etme" Yazısına uygun diğer makalerler

Ajax ile Formdaki Tüm Elemanları Post Etme
Youtube, İnternetsiz video izlettirecek
Youtube, İnternetsiz video izlettirecek
Ajax ile Formdaki Tüm Elemanları Post Etme
Youtube videolarınızı gife çevirin
Youtube videolarınızı gife çevirin
Ajax ile Formdaki Tüm Elemanları Post Etme
Youtube de html5 e geçin.
Youtube de html5 e geçin.