Отправка массивов и файлов через FormData и AJAX в PHP

Быстрый ответ

Для решению стандартной задачи можно преобразовать массив в строку формата JSON с помощью функции JSON.stringify(). После преобразования добавим эту строку в FormData, используя метод .append(). Полученные на сервере данные можно обратно преобразовать в исходный массив через JSON.parse().

let formData = new FormData();
formData.append('myArray', JSON.stringify([1, 2, 3])); // преобразуем массив в JSON

$.ajax({
    url: 'server.php', 
    type: 'POST',
    data: formData,
    contentType: false,
    processData: false,
    success: console.log, // "Ура, все отлично работает! 🎉"
    error: console.error // "Внимание, возникла ошибка! 🚀"
});

Погружение в детали: работа со сложными массивами

Сохранение сложной структуры

Если вам нужно сохранить структуру сложных структур данных, таких как вложенные массивы или объекты, необходимо рекурсивно обходить их при добавлении в FormData. Написание вспомогательной функции для этого существенно упростит процесс.

Подробнее об этом расскажет наш спикер на видео

Бережное обращение с многомерными массивами

Обход многомерных массивов требует особого внимания. Необходимо аккуратно пройтись по каждому уровню массива, преобразуя его структуру в формат, совместимый с FormData, что позволит сохранить структуру данных на серверной стороне.

Проверим содержимое FormData

Перед отправкой данных рекомендуется осмотреть содержимое FormData, используя console.log(), чтобы убедиться в правильности структуры.

for (let [key, value] of formData.entries()) {
    console.log(key, value); // проверим, что у нас получилось
}

Конвертация в JSON

Преобразование массива в строку JSON — это не только практично, но и модно, т.к. это помогает сохранить структуру данных. На стороне PHP для восстановления массива используйте функцию json_decode().

Обратите внимание на объекты File

Исключите из ручного добавления в FormData объекты File. Из-за особенностей их работы рекомендуется добавлять их через специальные методы.

Визуализация

let formData = new FormData(); // подготавливаем "рюкзак" 🎒 для данных
let apples = ['Gala', 'Fuji', 'Honeycrisp']; // яблоки 🍎🍎🍎 готовы к отправке

apples.forEach((apple, index) => {
    formData.append(`apples[${index}]`, apple); // каждое яблоко помещаем в свою ячейку
});

// Делегируем отправку данных AJAX'у 🚀
$.ajax({
    url: 'your-endpoint',
    data: formData,
    processData: false,
    contentType: false,
    type: 'POST',
    success: function(data){
        console.log('Яблоки успешно доставлены!'); // яблоки на месте 🎉
    }
});

Append: Секреты работы с массивами и файлами

Добавление целого массива в FormData преобразует его в строку. Чтобы сохранить структуру массива, добавляйте элементы по отдельности.

Обход строгих проверок типов

Для более сложных проектов можно рассмотреть использование TypeScript, который помогает контролировать соответствие типов и поддерживать код в порядке.

Корректная работа с файлами

Отправка файлов с FormData требует их непосредственного добавления с помощью метода formData.append('file', myFile), что позволяет серверу корректно обрабатывать файлы.

Метод explode: инструмент, достойный ядерщика

Иногда для десериализации данных, отправленных из JavaScript, используется функция explode() на стороне PHP. Она может пригодиться, если данные сериализуются нестандартным способом. Такой подход могут применять как ядерщики, так и программисты PHP.

Полезные материалы

1. FormData – Веб-API | MDN — официальная документация по FormData от Mozilla Developer Network.
2. javascript – Обработка скачивания файла через ajax post – Stack Overflow — обсуждение работы с файлами при помощи AJAX и FormData на Stack Overflow.
3. Стандарт HTML — документация по интерфейсу FormData из HTML Living Standard.
4. XMLHttpRequest Level 2 — спецификация W3C по использованию FormData в XMLHttpRequest Level 2.
5. FormData — практическое руководство JavaScript.info по применению FormData.
6. GitHub – axios/axios: Обещающий HTTP-клиент для браузера и node.js — официальный репозиторий GitHub для Axios, клиента HTTP для работы с FormData.
7. jQuery.ajax() | Документация API jQuery — документация по методу ajax от jQuery, подходящая для работы с FormData.