Методы FormData для проверки и модификации

Sam Thorogood

FormData — лучший друг пользователя XHR, и в Chrome 50 он обновляется. Мы добавляем методы, позволяющие вам проверять объекты FormData или изменять их постфактум. Теперь вы можете использовать get() , delete() и вспомогательные средства итерации, такие как entries , keys и т. д. ( Ознакомьтесь с полным списком .)

Если вы еще не используете FormData, это простой, хорошо поддерживаемый API, который позволяет вам программно создавать виртуальную форму и отправлять ее в отдаленное место с помощью window.fetch() или XMLHttpRequest.send(formData) .

Некоторые примеры читайте дальше!

Анализируйте реальные формы как профессионал

FormData можно создать из реальной HTML-формы, сделав снимок всех ее текущих значений. Однако раньше объект был совершенно непрозрачным. Все, что вы могли сделать, это отправить его в неизмененном виде на сервер. Теперь вы можете взять его, модифицировать, копировать, наблюдать, сжимать, изменять и, наконец, загружать:

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 через старый XMLHttpRequest :

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

Не выбрасывайте свои FormData

Если вы создаете свои собственные FormData с нуля, вас, возможно, расстраивает то, что вы не можете использовать их повторно — вы потратили много времени на эти поля! Поскольку оба метода window.fetch() и XMLHttpRequest.send() делают снимок FormData , теперь вы можете безопасно повторно использовать и изменять свою работу! Посмотрите этот пример:

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