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

Deniz Tolga
Sam Thorogood

FormData, XHR kullanıcısının en iyi arkadaşı ve Chrome 50'de yeni sürüme geçiriliyor. İşlem tamamlandıktan sonra FormData nesnelerinizi incelemenize veya değiştirmenize olanak tanıyan yöntemler ekliyoruz. Artık get(), delete() ve entries, keys gibi yineleme yardımcılarını ve daha fazlasını kullanabilirsiniz. (Tam listeye göz atın.)

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

Bazı örnekler için okumaya devam edin!

Gerçek formları profesyonelce ayrıştırın

FormData, mevcut tüm değerlerinin anlık görüntüsünü alarak gerçek bir HTML formundan oluşturulabilir. Ancak nesne eskiden tamamen opaktı. Yalnızca değiştirilerek bir sunucuya gönderebiliyordunuz. Artık dosyayı alabilir, değiştirebilir, bastırabilir, gözlemleyebilir, küçültebilir, değiştirebilir ve son olarak da 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});
}

Ayrıca FormData öğesini eski XMLHttpRequest üzerinden de gönderebilirsiniz:

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

FormData'nızı atmayın

Kendi FormData çalışmanızı sıfırdan oluşturuyorsanız bu alanlarda çok fazla zaman harcamış olduğunuzdan yeniden kullanamamanızın can sıkıcı olduğunu fark etmiş olabilirsiniz. Hem window.fetch() hem de XMLHttpRequest.send() yöntemi FormData öğesinin anlık görüntüsünü aldığından, çalışmanızı güvenli bir şekilde 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});