javascript - 通过 POST 方法将 Javascript 动态生成的具有复杂结构的表单提交到 PHP 脚本

Question

我正在尝试找出通过 POST 方法将 Javascript 中动态生成的具有复杂结构的表单提交到 PHP 脚本的最佳方法。

表单具有这种层次结构:

<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>

然后，在服务器端，我可以通过检查 $_POST 来恢复 PHP 中的结构。大批。但是，我忍不住认为我不必为以特定方式命名字段而烦恼，应该可以以更简单的方式恢复表单的内容和结构。

例如，为了进行各种 Ajax 调用，我需要在填充时将动态创建的表单的内容和结构存储在 Javascript 对象中，我使用 JSON.stringify 将其发送到服务器。当我进行 Ajax 调用并使用 json_decode 在 PHP 中恢复时

例如，如果我在填充时将动态创建的表单的内容和结构存储在 Javascript 对象中(无论如何我都必须这样做，以便进行需要该信息的各种 Ajax 调用)，也许我可以以某种方式使用 JSON.stringify将该对象发送到处理表单的 PHP 脚本并使用 json_decode轻松地在服务器端获得正确的数据结构。事实上，我想我什至可以通过用户单击提交按钮时进行的另一个 Ajax 调用来实现这一点，而不是通过常规表单提交来实现。但我不认为这是最佳实践，因为我在 Web 开发方面没有太多经验，所以我想知道通过 POST 在 Javascript 中动态生成复杂结构的表单到 PHP 脚本的最佳实践是什么方法。

编辑:只是为了澄清一下，由于 Bilel 指出我没有说我打算如何处理表单中的数据，服务器端的 PHP 脚本会将数据库中的数据存储在保留结构的方式。

Answer 1

这是一个详细的问题，但您没有告诉我们您将如何使用这些收集到的数据？

如果要存储和显示它，那么您已经找到了最简单的解决方案，即使用 json 编码 $_POST 数据。

例如，如果您稍后可能需要查询用户年龄(通过输入字段发布的用户年龄)等关系功能，那么您应该考虑预先构建数据。首先使用 jQuery/Javascript 函数将其转换为格式良好的 Json，然后在服务器端解析 json，将每个输入字段插入到相应的数据库字段中。

甚至，这违反了设计惯例并且消耗空间，我有时会将整个 json 存储在靠近其他结构化数据库记录的单独字段中。新的 DBMS 可以处理 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");
}