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});