Tasarım Kodlama

JavaScript FormData Kullanımı ve Örneği

Bu yazıda, JavaScript FormData API’sini ve fetch  API’sini kullanarak FormData’nın nasıl gönderileceğini öğreneceksiniz.

JavaScript FormData API’si

İki alan adı ve e-posta içeren bir abonelik formunuz olduğunu varsayalım.

Submit düğmesine tıkladığınızda, web tarayıcısı formdaki ad ve e-posta alanlarının değerlerini sunucuya gönderir.

Benzer şekilde, FormData arabirimi, JavaScript’te form alanlarını ve bunların değerlerini temsil eden bir dizi anahtar/değer çifti oluşturmanıza olanak tanır.

Bir FormData nesnesine sahip olduktan sonra, fetch API‘sini kullanarak onu sunucuya gönderebilirsiniz. Formu GET isteği gibi göndermek istiyorsanız, FormData nesnesini URLSearchParams yapıcısına iletebilirsiniz.

FormData nesnesi oluşturun

Aşağıdaki, bir HTML form öğesinden yeni bir FormData nesnesi oluşturur:

Aşağıdaki komut dosyası, bir FormData nesnesinin değerlerini gösterir:

Nasıl çalışır.

  • İlk olarak, belge nesnesinin querySelector() yöntemini kullanarak gönder düğmesini seçin.
  • Ardından, gönder düğmesinin tıklama olayını işlemek için bir olay işleyici ekleyin.
  • Ardından, form gönderimini önlemek için olay nesnesinin PreventionDefault() yöntemini çağırın.
  • Bundan sonra, form öğesinden yeni bir FormData nesnesi oluşturun.
  • Son olarak, FormData nesnesinin entries() yöntemini çağırın. entries() yöntemi bir yineleyici döndürdüğünden, spread operatörünü (…) kullanmanız gerekir.

FormData Metotları

FormData nesnesi aşağıdaki yöntemlere sahiptir:

append()

append() yönteminin iki biçimi vardır:

append() yöntemi, bir FormData nesnesi içindeki mevcut bir anahtara yeni bir değer ekler veya yoksa, anahtarı ekler.

delete()

delete() FormData nesnesinden anahtarın adına göre bir anahtar/değer çiftini siler.

entries()

entries() yöntemi, FormData nesnesindeki tüm anahtar/değer çiftlerinin bir yineleyicisini döndürür.

get() 

get() bir anahtar adıyla ilk değeri döndürür.

getAll()

getAll() bir anahtar adına göre tüm değerlerin bir dizisini döndürür.

has() 

FormData nesnesi bir anahtar adı içeriyorsa has() yöntemi true değerini döndürür.

keys() 

key() yöntemi, tüm anahtarların bir yineleyicisini döndürür.

set() 

set() yönteminin iki biçimi vardır.

set() yöntemi, mevcut bir anahtar adı için yeni bir değer ayarlar veya halihazırda yoksa anahtar/değeri ekler.

values()

value() FormData nesnesindeki tüm değerlerin bir yineleyicisini döndürür.

fetch API’sini kullanarak FormData’yı gönderin

Sunucuya bir FormData nesnesi göndermek için FetchAPI kullanan basit bir abonelik formu oluşturacağız.

Aşağıda, getirme API’sini kullanarak FormData’nın nasıl gönderileceği gösterilmektedir:

yada

HTML form değerlerini yakalamak için JavaScript FormData API’sini kullanın.
FormData’yı sunucuya göndermek için fetch API’sini kullanın.

Yorum yap