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.


<form action="subscribe.php" method="post" id="abonelik">
    <div>
        <label for="name">Ad:</label>
        <input type="text" name="name" id="name"/>
    </div>
    <div>
        <label for="email">Email:</label>
        <input type="email" name="email" id="email"/>
    </div>
    <div>
        <button type="submit" id="submit">Abone Ol</button>
    </div>
</form>

<div>

</div>

<div>

<label for="email">Email:</label>

</div>

<div>

<button type="submit" id="submit">Abone Ol</button>

</div>

</form>

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.

İçindekiler

FormData nesnesi oluşturun

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


const form = document.querySelector('#abonelik');

const formData = new FormData(abonelik);

const form = document.querySelector('#abonelik');

const formData = new FormData(abonelik);

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


const btn = document.querySelector('#submit');
const form = document.querySelector('#abonelik');

btn.addEventListener('click', (e) => {
    // prevent ->formu göndermeyi iptal eder
    e.preventDefault();

    // form değerlerini gösterir.
    const formData = new FormData(form);
    const degerler = [...formData.entries()];
    console.log(degerler);
});

const btn = document.querySelector('#submit');

const form = document.querySelector('#abonelik');

btn.addEventListener('click', (e) => {

// prevent ->formu göndermeyi iptal eder

e.preventDefault();

// form değerlerini gösterir.

const formData = new FormData(form);

const degerler = [...formData.entries()];

console.log(degerler);

});

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:


FormData.append(ad, deger)
FormData.append(ad, deger, dosya)

FormData.append(ad, deger)

FormData.append(ad, deger, dosya)

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.


FormData.delete(ad);

FormData.delete(ad);

entries()

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


FormData.entries()

FormData.entries()

get()

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


FormData.get(ad)

FormData.get(ad)

getAll()

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


FormData.getAll(ad)

FormData.getAll(ad)

has()

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


FormData.has(ad);

FormData.has(ad);

keys()

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


FormData.keys()

FormData.keys()

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.


FormData.set(ad, deger);
FormData.set(ad, deger, dosyadi);

FormData.set(ad, deger);

FormData.set(ad, deger, dosyadi);

values()

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


FormData.values()

FormData.values()

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:


<form action="subscribe.php" method="post" id="abonelik">
    <div>
        <label for="name">Ad:</label>
        <input type="text" name="name" id="name"/>
    </div>
    <div>
        <label for="email">Email:</label>
        <input type="email" name="email" id="email"/>
    </div>
    <div>
        <button type="submit" id="submit">Abone Ol</button>
    </div>
</form>
<div id="mesaj"></div>

<div>

</div>

<div>

<label for="email">Email:</label>

</div>

<div>

<button type="submit" id="submit">Abone Ol</button>

</div>

</form>


const btn = document.querySelector('#submit')
const form = document.querySelector('#abonelik')
const messageEl = document.querySelector('#message')

btn.addEventListener('click', (e) => {
    e.preventDefault()
    abonelik()
});

const abonelik = async () => {
  const adres ='https://reqbin.com/echo/post/json'
  try {
    let response = await fetch(adres, {
    method: 'POST',
    body: new FormData(form),
    });
    const sonuc = await response.json();

    console.log(sonuc)
  
  } catch (error) {
      console.log("Hata")
  }
}

const btn = document.querySelector('#submit')

const form = document.querySelector('#abonelik')

const messageEl = document.querySelector('#message')

btn.addEventListener('click', (e) => {

e.preventDefault()

abonelik()

});

const abonelik = async () => {

const adres ='https://reqbin.com/echo/post/json'

try {

let response = await fetch(adres, {

method: 'POST',

body: new FormData(form),

});

const sonuc = await response.json();

console.log(sonuc)

} catch (error) {

console.log("Hata")

}

yada


const btn = document.querySelector('#submit')
const form = document.querySelector('#abonelik')
const messageEl = document.querySelector('#message')

btn.addEventListener('click', (e) => {
    e.preventDefault()
    abonelik()
      .then(sonuc=>{console.log(sonuc)})
      .catch(hata=>{console.log(hata)})
});

const abonelik = async () => {
  const adres ='https://reqbin.com/echo/post/json'
    let response = await fetch(adres, {
    method: 'POST',
    body: new FormData(form),
    });
    return await response.json()
}

const btn = document.querySelector('#submit')

const form = document.querySelector('#abonelik')

const messageEl = document.querySelector('#message')

btn.addEventListener('click', (e) => {

e.preventDefault()

abonelik()

.then(sonuc=>{console.log(sonuc)})

.catch(hata=>{console.log(hata)})

});

const abonelik = async () => {

const adres ='https://reqbin.com/echo/post/json'

let response = await fetch(adres, {

method: 'POST',

body: new FormData(form),

});

return await response.json()

}

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.

JavaScript FormData Kullanımı ve Örneği

FormData nesnesi oluşturun

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

Yorum Yap

İptal Et

FormData nesnesi oluşturun

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

Bunları da beğenebilirsiniz

Yorum Yap