jQuery Form-序列化为多维数组？

Question

我需要从中获得价值形式，将其格式化为JSON并通过AJAX发布。这是我想要实现的格式：

{项目：[{id:7，名称：'Book'，价格：5.7}，{id:5，名称：'铅笔'，价格：2.5}]}

以下是HTML：

（函数（$）{var$form=$（'form'）；//serializeArray格式与我需要的格式相去甚远var rawData=$form.serializeArray（）；console.log（rawData）})（jQuery）；

<script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js“></script><表格><字段集><h2>产品1</h2><input type=“hidden”name=“items[0][id]”value=“7”><input type=“text”name=“items[0][name]”value=“Book”><输入type=“number”name=“items[0][price]”value=“5.7”></fieldset><字段集><h2>产品2</h2><input type=“hidden”name=“items[1][id]”value=“5”><input type=“text”name=“items[1][name]”value=“Pencil”><输入type=“number”name=“items[1][price]”value=“2.5”></fieldset></form>

我应该循环并使用regex来解析名称? 还是有内置方式？

我可以更改<表格>格式（如果需要）。

Answer 1

请看一下这种方法。我们不能只使用$.serializeArray（）但我们还需要一些自定义代码，如下所示。实际上我们需要遍历所有<字段集>根据需要获取JSON：

（函数（$）{var$form=$（'form'）；var fieldSets=$form.find（“fieldset”）；var结果={项目：[]};fieldSets.each（函数（）{var字段={}；$.each（$（this）.serializeArray（），function（）{字段[this.name]=this.value；});result.items.push（字段）；});console.log（结果）；})（jQuery）；

<script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js“></script><表格><字段集><h2>产品1</h2><输入type=“hidden”name=“id”value=“7”><input type=“text”name=“name”value=“Book”><input type=“number”name=“price”value=“5.7”>输入类型=“number”name=“price”value=“5.7”></fieldset><字段集><h2>产品2</h2><输入type=“hidden”name=“id”value=“5”><input type=“text”name=“name”value=“Pencil”>＜input type=“number”name=“price”value=“2.5”＞</fieldset></form>

注：将HTML修改为name=“项目[0][id]”我已经给了name=“id”

Answer 2

您不能在这里使用默认的序列化，相反，您可以像这样进行手动序列化

（函数（$）{var$fieldsets=$（'form fieldset'）；var项=$fieldsets.map（函数（i，fs）{变量obj={}；$（fs）.find（'input'）.each（function（）{obj[this.name.match（/\[（[^\[]*）\]$/）[1]=this.value；});返回对象；}).get（）；var原始数据={项目：项目};console.log（rawData）})（jQuery）；

<script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js“></script><表格><字段集><h2>产品1</h2><input type=“hidden”name=“items[0][id]”value=“7”><input type=“text”name=“items[0][name]”value=“Book”><输入type=“number”name=“items[0][price]”value=“5.7”></fieldset><字段集><h2>产品2</h2><input type=“hidden”name=“items[1][id]”value=“5”><input type=“text”name=“items[1][name]”value=“Pencil”><输入type=“number”name=“items[1][price]”value=“2.5”></fieldset></form>

Answer 3

是的，您需要解析名称自己动手。没有自动解析自定义字段的方法。当然，有多种方法可以做到这一点。

注：我假设您的name=“项目[0][id]”字段指定这必须是结果数组中的第0项，并且此类<输入>字段不一定按DOM中的#项升序排列。换句话说项目[N]应该控制它是Qth<字段集>在中<表格>.

你可以使用序列化数组（）然后处理该数据：

（函数（$）{var$form=$（'form'）；var数据=$form.serializeArray（）；var结果={items:[]}；data.forEach（函数（输入）{nameArray=input.name.split（/[\]]/）；item=nameArray[1]；prop=名称数组[3]；if（typeofresult.items[item]！=='object'）{result.items[item]={}；}if（typeof result.items[item][prop]！==“未定义”）{//名称属性的一致性检查console.log（'警告重复的“name”属性='+input.name）；}result.items[item][prop]=输入值；});console.log（结果）；})（jQuery）；

<script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js“></script><表格><字段集><h2>产品1</h2><input type=“hidden”name=“items[0][id]”value=“7”><input type=“text”name=“items[0][name]”value=“Book”><输入type=“number”name=“items[0][price]”value=“5.7”></fieldset><字段集><h2>产品2</h2><input type=“hidden”name=“items[1][id]”value=“5”><input type=“text”name=“items[1][name]”value=“Pencil”><输入type=“number”name=“items[1][price]”value=“2.5”></fieldset></form>

或者，您可以直接从DOM处理它：

（函数（$）{var结果={items:[]}；$（'表单字段集输入'）.each（function（）{nameArray=this.name.split（/[\]]/）；item=nameArray[1]；prop=名称数组[3]；if（typeof result.items[item]！==“对象”）{result.items[item]={}；}if（typeof result.items[item][prop]！==“未定义”）{//名称属性的一致性检查console.log（'警告重复“name”属性='+this.name）；}result.items[item][prop]=this.value；});console.log（结果）；})（jQuery）；

<script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js“></script><表格><字段集><h2>产品1</h2><input type=“hidden”name=“items[0][id]”value=“7”><input type=“text”name=“items[0][name]”value=“Book”><输入type=“number”name=“items[0][price]”value=“5.7”></fieldset><字段集><h2>产品2</h2><input type=“hidden”name=“items[1][id]”value=“5”><input type=“text”name=“items[1][name]”value=“Pencil”><输入type=“number”name=“items[1][price]”value=“2.5”></fieldset></form>