İnceleme ve değişiklik için FormData yöntemleri

Sam Thorogood

FormData, XHR kullanıcılarının en iyi arkadaşıdır ve Chrome 50'de yeni bir özellik eklendi. FormData nesnelerinizi incelemenize veya daha sonra değiştirmenize olanak tanıyan yöntemler ekliyoruz. Artık get(), delete() ve entries, keys gibi iterasyon yardımcılarını kullanabilirsiniz. (Tam listeye göz atın.)

Henüz FormData'yı kullanmıyorsanız bu basit ve iyi desteklenen API, programlı olarak sanal bir form oluşturmanıza ve window.fetch() veya XMLHttpRequest.send(formData) kullanarak uzak bir yere göndermenize olanak tanır.

Bazı örnekler için okumaya devam edin.

Gerçek formları profesyonelce ayrıştırma

FormData, mevcut tüm değerlerinin anlık görüntüsünü alarak gerçek bir HTML formundan oluşturulabilir. Ancak nesne tamamen opaktı. Tek yapabileceğiniz, dosyayı değiştirmeden bir sunucuya göndermekti. Artık bu resmi alıp değiştirebilir, kırpabilir, gözlemleyebilir, küçültebilir, değiştirebilir ve son olarak yükleyebilirsiniz:

function sendRequest(theFormElement) {
    var formData = new FormData(theFormElement);
    formData.delete("secret_user_data"); // don't include this one!
    if (formData.has("include_favorite_color")) {
    formData.set("color", userPrefs.getColor());
    }
    // log all values like <input name="widget">
    console.info("User selected widgets", formData.getAll("widget"));

    window.fetch(url, {method: 'POST', body: formData});
}

FormData'ü eski XMLHttpRequest üzerinden de gönderebilirsiniz:

var x = new XMLHttpRequest();
x.open('POST', url);
x.send(formData);

FormData'nızı atmayın

Kendi FormData'nizi sıfırdan oluşturuyorsanız bu alanları doldurmak için çok zaman harcadığınız için bunları yeniden kullanamamanın can sıkıcı olduğunu fark etmiş olabilirsiniz. Hem window.fetch() hem de XMLHttpRequest.send() yöntemleri FormData öğesinin anlık görüntüsünü aldığından artık çalışmanızı güvenle yeniden kullanabilir ve değiştirebilirsiniz. Aşağıdaki örneği inceleyin:

// append allows multiple values for the same key
var formData = new FormData();
formData.append("article", "id-123");
formData.append("article", "id-42");

// send like request
formData.set("action", "like");
window.fetch(url, {method: 'POST', body: formData});

// send reshare request
formData.set("action", "reshare");  // overrides previous "action"
window.fetch(url, {method: 'POST', body: formData});