Metode FormData untuk inspeksi dan modifikasi

Sam Thorogood

FormData adalah teman terbaik pengguna XHR, dan akan mendapatkan upgrade di Chrome 50. Kami menambahkan metode yang memungkinkan Anda memeriksa objek FormData atau mengubahnya setelah kejadian. 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 beberapa contoh, baca terus.

Mengurai formulir sungguhan seperti seorang profesional

FormData dapat dibuat dari formulir HTML yang sebenarnya, dengan mengambil snapshot semua nilai saat ini. Namun, objek tersebut sebelumnya sepenuhnya buram. Yang dapat Anda lakukan hanyalah meneruskannya, tanpa perubahan, ke server. Sekarang, Anda dapat mengambilnya, mengubahnya, memukulnya, mengamatinya, mengecilkannya, 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 lama:

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

Jangan buang FormData Anda

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

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