Методы 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});