Question

我有一个输入看起来像这样的表单：

<form id="myForm">
    <input type="text" name="location[0]">
    <input type="text" name="location[1]">
    <input type="text" name="user[0]">
    <input type="text" name="user[1]">
    ...
</form>

我正在使用表单数据作为帖子正文进行ajax调用。当我尝试序列化表单（$("#myForm").serializeArray）时，我没有在数组中获取数组。我仍然将所有字段作为自己的单独对象，如下所示：

[
 {
    name: "location[0]",
    value: "123"
 },
 {
    name: "location[1]",
    value: "456"
 }
 ...
]

如何序列化表单以便将多维数组作为要发送到后端的数据（在Scala中）？我希望它看起来像：

[
  { name: "location",
    value: [123, 456]
  },
  { name: "user",
    value: ["Jim", "Jane"]
  }
 ]

Answer 1

小提琴https://jsfiddle.net/w8bu4s10/

我不知道基本功能，但您可以使用此功能：

function getArray(element){
  var result = new Array();
  $(element).find('input').each(function(i,e){
    // extract path from name
    var path = $(e).attr('name').split('[');
    for(var key in path){
        if(path[key].endsWith(']')){
        path[key] = path[key].substr(0, path[key].length-1);
      }
    }

    // create path inside result array
    var node = result;
    for(var depth in path){
        if(depth == path.length-1){
                if(Number.isInteger(path[depth])){
                    node.splice(path[depth], 0, $(e).val());
        }else{
            node.push($(e).val());
        }
            }else{
        var found = false;
        for(var key in node){
          if(node[key].name == path[depth]){
            found = true;
            node = node[key].value;
            break;
          }
        }

        if(!found){
          var obj = new Object();
          obj['name'] = path[depth];
          obj['value'] = new Array();
          node.push(obj);
          node = node[node.length - 1].value;
        }
      }
    }
  });
  return JSON.stringify(result);
}

Answer 2

我想出了怎么做。在末尾用数组括号命名所有输入，但不在[]中指定索引。即使在打印form.serializeArray()的结果时它看起来不是正确的数组值，后端也会正确解释它。在我的例子中，Scala Play使用相同的密钥将所有值合并到ArrayBuffer中。

如何使用输入名称数组正确序列化表单

2 个答案: