AJAX ile Form Submission

AJAX ile Form Submission, web sayfasındaki formları arka planda göndermenin yoludur. Bu sayede, sayfanın yeniden yüklenmesi gerekmeden form verileri sunucuya gönderilebilir. Bu işlemi gerçekleştirmek için, AJAX kullanarak form verilerini arka planda gönderebilir ve sunucudan gelen yanıtı kullanarak sayfayı güncelleyebilirsiniz.

Form verilerini göndermek için, XMLHttpRequest objesini kullanabilirsiniz. Örnek olarak, aşağıdaki kod parçası, form verilerini arka planda gönderir ve sunucudan gelen yanıtı ekrana yazdırır:

<form id="myForm">
  <input type="text" name="name" placeholder="Name">
  <input type="email" name="email" placeholder="Email">
  <textarea name="message" placeholder="Message"></textarea>
  <button type="submit">Send</button>
</form>

<script>
  var form = document.getElementById("myForm");
  form.addEventListener("submit", function(e) {
    e.preventDefault(); // formun normal işlevini engellemek için
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "submit.php", true);
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText);
      }
    };
    var formData = new FormData(form);
    xhr.send(formData);
  });
</script>

Bu örnekte, form verileri “submit.php” dosyasına “POST” metodu ile gönderilecektir. Sunucudan gelen yanıt “console.log” ile ekrana yazar . Bu örnekte kullanılan “FormData” objesi, form verilerini toplar ve “xhr.send()” metodu ile gönderir.

AJAX ile Form Submission sayesinde, kullanıcılar form verilerini gönderirken sayfanın yeniden yüklenmesi gerekmez. Ayrıca, sunucudan gelen yanıt kullanılarak sayfa dinamik olarak güncellenecektir.. Örneğin, form gönderildikten sonra sunucudan gelen yanıt “success” ise, kullanıcıya başarılı bir şekilde mesaj gösterilecektir. Bu teknolojinin kullanımı ile web formları daha hızlı ve kullanıcı dostu hale gelecektir. Ayrıca, form verilerinin gönderilirken geçen zaman kullanıcıya gösterilerek, bekleme süresi azalır.

Form Submission için kullanılan “submit.php” dosyası, gönderilen form verilerini işlemekte ve sunucudan gelen yanıtı oluşturmaktadır. Bu dosyada, önce verilerin doğruluğu önce kontrol edilecektir.  Ardından da veritabanına kaydedilecektir. Eğer isterseniz e-posta gönderilmesi gerekiyorsa e-posta gönderimi gibi işlemler yapılabilirsiniz.

Son olarak AJAX ile Form Submission, web formlarının kullanımını hızlandırmakla kalmaz, aynı zamanda kullanıcı deneyimini de iyileştirir. Bu teknolojinin kullanımı ile web formları daha hızlı ve daha interaktif hale gelecektir.

1. W3Schools: https://www.w3schools.com/xml/ajax_form_submit.asp
2. Sitepoint: https://www.sitepoint.com/ajax-jquery-form-submit/
3. CodePen: https://codepen.io/jthoms1/pen/zObzZJ