Отправка формы со сложной структурой, динамически генерируемой в Javascript в PHP сценарии с помощью метода POST - PullRequest
0 голосов
/ 11 января 2020

Я пытаюсь найти наилучший способ отправки формы со сложной структурой, которая динамически генерируется в Javascript в сценарий PHP с помощью метода POST.

Форма имеет это вид иерархической структуры:

<div class="item">
  <textarea class="subitem_textarea"></textarea>
  <input type="text"/>
  <input type="text"/>
</div>
<div class="item">
   <textarea></textarea>
  <input type="text"/>
  <input type="text"/>
  <input type="text"/>
</div>

Количество элементов является переменным и не может быть известно заранее, так как элементы создаются пользователем. Каждый элемент имеет одно поле <textarea>, но переменное количество полей <input type="text"/>, поскольку они также создаются пользователем.

Мне необходимо каким-то образом сохранить содержимое формы в базе данных. которая сохраняет эту структуру, поэтому сценарий PHP должен знать, какое поле принадлежит какому элементу.

Я думаю, что один из способов сделать это - на стороне клиента (Javascript + jQuery), чтобы поля были названы так, чтобы на стороне сервера (PHP) я мог это выяснить. Например, используя Javascript + jQuery, я мог бы организовать для HTML формы, которая динамически генерируется на стороне клиента, следующее:

<div class="item">
  <textarea name="textareas[0]"></textarea>
  <input type="text" name="texts[0][0]"/>
  <input type="text" name="texts[0][1]"/>
</div>
<div class="item">
  <textarea name="textareas[1]"></textarea>
  <input type="text" name="texts[1][0]"/>
  <input type="text" name="texts[1][1]"/>
  <input type="text" name="texts[1][2]"/>
</div>

Затем, на стороне сервера, Я могу просто восстановить структуру в PHP, проверив массив $_POST. Тем не менее, я не могу не думать, что мне не нужно беспокоиться об именовании полей определенным образом, что должна быть возможность восстановить содержимое и структуру формы более простым способом.

Например, чтобы совершать различные вызовы Ajax, мне уже нужно сохранять содержимое и структуру этой динамически созданной формы в объекте Javascript по мере его заполнения, который я отправляю на сервер, используя JSON.stringify, когда сделать Ajax вызов и восстановить в PHP с помощью json_decode

Например, если я сохраню содержимое и структуру динамически созданной формы в объекте Javascript по мере его заполнения (который я в любом случае, для выполнения различных вызовов Ajax, требующих этой информации), возможно, я смогу каким-то образом использовать JSON.stringify для отправки этого объекта в сценарий PHP, который обрабатывает форму, и использования json_decode для получения правильная структура данных на стороне сервера без хлопот. На самом деле, я думаю, что я мог бы даже сделать это с другим вызовом Ajax, который делается, когда пользователь нажимает кнопку отправки, вместо того, чтобы делать это посредством обычной отправки формы. Но я не думаю, что это лучшая практика, и, поскольку у меня нет большого опыта в веб-разработке, я хочу знать, что является лучшей практикой для формы со сложной структурой, динамически генерируемой от Javascript до PHP сценарий с помощью метода POST.

РЕДАКТИРОВАТЬ: просто чтобы уточнить, поскольку Билел указал, я не сказал, что я собираюсь делать с данными в форме, сценарий PHP на стороне сервера собирается хранить данные в базе данных таким образом, чтобы сохранить структуру.

1 Ответ

1 голос
/ 11 января 2020

Это подробный вопрос, но вы не сказали нам, как вы собираетесь использовать эти собранные данные?

Если они предназначены для хранения и отображения, то да, вы уже нашли самое простое решение с помощью кодировки $ _POST data with json.

Если, например, вам позже могут понадобиться реляционные функции, такие как запрос возраста пользователей (те, которые публикуются через поля ввода), тогда вам следует подумать о предварительной структуризации ваших данных. С функциями jQuery / Javascript сначала в хорошо отформатированный Json, а затем анализируйте json на стороне сервера, чтобы вставить каждое поле ввода в соответствующее поле базы данных.

Даже, это противоречит соглашениям проектирования и занимая много места, я иногда храню все json в отдельном поле рядом с другими записями структурированной базы данных. Новая СУБД может обрабатывать json типов ...

Просто чтобы показать вам пример, я сделал эту функцию для хранения предварительно структурированного json, содержащего информацию о номерах, в системе бронирования, где мы можем динамически добавлять дополнительные комнаты:

function jss(){
    var json = {};
                json.rooms = $('.camera').map(function() {
            return {               

                max : $(this).find(".max").val()
              , arrange : $(this).find(".arrang").val()
               ,kids: $('[name^=enf]', this).map(function() {
                    return {
                        age: $(this).val()
                    };                    
                }).get()
               , adults: $('[name^=pers]', this).map(function() {
                    return {
                        name: $(this).val()

                    };                    
                }).get()
            };
        }).get();

        return JSON.stringify(json, null, "\t");
}
...