Metode FormData untuk inspeksi dan modifikasi

Sam Thorogood

FormData adalah sahabat terbaik pengguna XHR, dan akan mendapatkan upgrade di Chrome 50. Kami menambahkan metode yang memungkinkan Anda memeriksa objek FormData atau mengubahnya setelahnya. Anda kini dapat menggunakan get(), delete(), dan helper iterasi seperti entries, keys, dan lainnya. (Lihat daftar lengkapnya.)

Jika Anda belum menggunakan FormData, ini adalah API sederhana yang didukung dengan baik yang memungkinkan Anda membuat formulir virtual secara terprogram dan mengirimkannya ke tempat yang jauh menggunakan window.fetch() atau XMLHttpRequest.send(formData).

Untuk mengetahui beberapa contohnya, baca terus.

Mengurai bentuk asli seperti seorang profesional

FormData dapat dibuat dari bentuk HTML sebenarnya, yang mengambil snapshot dari semua nilainya saat ini. Namun, objek ini sebelumnya sepenuhnya buram. Yang dapat Anda lakukan hanyalah mengirimkannya, tidak berubah, ke server. Sekarang, Anda dapat mengambil, memodifikasinya, mengubah ukuran, mengamati, mengecilkan, mengubahnya, dan terakhir, menguploadnya:

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

Anda juga dapat mengirim FormData melalui XMLHttpRequest yang lebih lama:

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

Jangan buang FormData Anda

Jika membuat FormData sendiri dari awal, Anda mungkin akan merasa kesal karena tidak dapat menggunakannya kembali - Anda telah menghabiskan banyak waktu di kolom tersebut. Karena metode window.fetch() dan XMLHttpRequest.send() mengambil snapshot FormData, kini Anda dapat menggunakan kembali dan mengubah pekerjaan Anda dengan aman. Lihat contoh berikut:

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