Отправка и получение данных AJAX

[Le7o]

Доброго времени.

Такая ситуация: на странице есть таблица, пытаюсь сделать добавление записи через всплывающую форму (на форме два поля типа file) - поэтому для отправки формы использую formData, с отправкой проблем не возникает, а вот как отправленные данные вставить в таблицу на форме не могу понять?

Вот что использую для отправки:

$('#modal_form').on('submit', function (e) {
        e.preventDefault();
        var $that = $(this),
            formData = new FormData($that.get(0));
            formData.append('type_form', 'table1');
/* для проверки отправляемых данных */
        console.log(formData.get('type_form'));
        console.log(formData.get('f1'));
        console.log(formData.get('f2'));
        console.log(formData.get('f3'));
        console.log(formData.get('f4'));
        console.log(formData.get('f5'));
/* для проверки отправляемых данных */
        $.ajax({
            url: $that.attr('action'),
            type: $that.attr('method'),
            contentType: false,
            processData: false,
            data: formData,
            //dataType: 'json',
            success: function (data) {
                if (data == '1'){
                    alert('Данные успешно добавлены');
                } else {
                    $('#modal_form #msg').fadeIn(100).delay(5000).html(data);
                    $('#modal_form #msg').fadeOut(100).html(data);
                }
            }
        });
    });

Теоретически подозреваю, что нужно с сервера только что добавленные поля собирать в массив или делать запрос к БД и обратно отправлять и вставлять их в таблицу!?
А вот каким образом?

[laimas]

Что вы хотите вставлять в базу, а затем в форму, если форма отправляет файлы?

[Le7o]

Что вы хотите вставлять в базу, а затем в форму, если форма отправляет файлы?

formData содержит:
- 4 текстовых поля
- 2 поля с файлами

С передачей серверу у меня проблем не возникает, возникают проблемы с вставкой отправленных данных в таблицу без перезагрузки страницы?

[Le7o]

Возможно не понятно изъясняюсь, что хочу в итоге:
0. открыл страницу в браузере, по середине таблица:
| Заголовок 1 | Заголовок 2 | Заголовок 3 | Заголовок 4 |
| Пустое поле | Пустое поле | Пустое поле | КНОПКА ДОБАВИТЬ

1. нажал кнопку "Добавить", открылась модальная форма - уже сделал!
2. заполнил данные, нажал "Сохранить", данные добавились в таблицу - уже сделал!
3. без перезагрузки страницы данные появились в ячейке на странице - пытаюсь сделать

По пункту 3, что бы в строку где "Пустое поле"(пункт 0) появились отправленные в шаге 2 значения.

[laimas]

Я о передаче и не спрашивал, и об Ajax тоже, хотя есть замечание - тип отправки должен быть указан как POST. Вы пишите:

а вот как отправленные данные вставить в таблицу на форме не могу понять?
Теоретически подозреваю, что нужно с сервера только что добавленные поля собирать в массив или делать запрос к БД и обратно отправлять и вставлять их в таблицу!?

Вот это кроссворд.

Данные в базу записываются запросом к базе. Но изначально упоминалось только о полях file, и хотя записать файл в базу можно (тип данных BLOB), но без пущей на то необходимости делать этого не стоит. Поэтому тут могут быть варианты записи данные/файлы.

А вот что такое собрать в массив (форма полученная сервером, это и есть массив), который обратно отправлять... это о чем?

[laimas]

| Заголовок 1 | Заголовок 2 | Заголовок 3 | Заголовок 4 |
| Пустое поле | Пустое поле | Пустое поле | КНОПКА ДОБАВИТЬ

Заполняя форму (текстовые поля) вы фактически уже заполняете данными таблицу на клиенте. Достаточно серверу по приему данных ответить "Сделано сэр", тогда клиенту перенести значения полей формы в ячейку таблицы, удалив поле формы. То есть гонять туда сюда данные в общем то нет необходимости. Единственное, это файлы, на которые сервер может вернуть ссылку, и которые будут отображены в таблице, например загруженные изображения.

То есть станет

| Заголовок 1 | Заголовок 2 | Заголовок 3 | Заголовок 4 |
| Значение из поля ввода | Значение из поля ввода | Значение из поля ввода | Пусто или Редактировать

[Le7o]

Метод POST у меня берется из action формы, как и URL:

url: $that.attr('action'),
type: $that.attr('method'),

В БД файлы я не пишу, я пишу только пути к файлам...

По итогу после добавления данных (отправки формы), хочу без перезагрузки страницы отобразить их(добавленные данные)...

[laimas]

Метод POST у меня берется из action формы

Да, проглядел я.

[Le7o]

| Заголовок 1 | Заголовок 2 | Заголовок 3 | Заголовок 4 |
| Пустое поле | Пустое поле | Пустое поле | КНОПКА ДОБАВИТЬ

Заполняя форму (текстовые поля) вы фактически уже заполняете данными таблицу на клиенте. Достаточно серверу по приему данных ответить "Сделано сэр", тогда клиенту перенести значения полей формы в ячейку таблицы, удалив поле формы. То есть гонять туда сюда данные в общем то нет необходимости. Единственное, это файлы, на которые сервер может вернуть ссылку, и которые будут отображены в таблице, например загруженные изображения.

То есть станет

| Заголовок 1 | Заголовок 2 | Заголовок 3 | Заголовок 4 |
| Значение из поля ввода | Значение из поля ввода | Значение из поля ввода | Пусто или Редактировать

Да все верно, только как эти значения вставить, в случае успешного ответа от сервера вставить в таблицу которая на странице?

success: function (data) {
        if (data == '1'){
               alert('Данные успешно добавлены');
               // ЗДЕСЬ МНЕ КАК НУЖНО ВСТАВИТЬ ДАННЫЕ В ТАБЛИЦУ на странице
               // Пытался обращаться здесь к formData.get('f1') - но выдает ошибку...
        } else {
                    $('#doc_modal_form #msg').fadeIn(100).delay(5000).html(data);
                    $('#doc_modal_form #msg').fadeOut(100).html(data);
                }
            }

[laimas]

У вас есть всего два варианта:

1) Форма, это де-факто диалог клиент-сервер, который подразумевает обязательную проверку данных сервером. Сервер не поместит данные формы в базу до тех пор, пока они не будут отвечать условиям. Отсюда следует, что данные помещаемые в базу, это есть клон данных в форме клиента (диалог то асинхронный). Значит зачем возвращать клиенту то, что у него и так имеется - берем значения value каждого поля формы и помещаем его в ячейку таблицы, в которой находится поле ввода. Само поле ввода удаляем. И так со всеми полями формы.
Что касаемо файлов, то с ними можно поступить точно также. Но тут могут быть же тоже вариации - например, файлы, это изображения, и средствами HTML5 можно организовать их предпросмотр, а значит и оставить в таблице как информация о том, что загружено. Но если изображение при загрузке обрабатывается сервером, то желательно видеть результат, а значит серверу нужно возвращать адрес на успешно загруженное изображение.
Ну и плюс - допустим, что уже добавленное в базу можно было редактировать, значит нужно не удалять поля и не переписывать их значения в таблицу, а всего лишь менять стиль (для выделения) и режим полей (например ключ), и кнопку на "Редактирование". В этом случае сервер должен вернуть идентификатор добавленной записи этих данных.

2) Север возвращает принятые данные, которые отобразятся на клиенте. Но такое делать имеет смысл тогда, когда сервер производит некие манипуляции с данными, модифицирует их, иначе то смысла нет.