Question

我有以下表格：

class MediaContentsController < ApplicationController

  @randomUsrId = rand(100)

  def create        
    puts @randomUsrId
  end

end

现在我想使用JavaScript / jQuery将这些值转换为JSON字符串。当我使用JSON.stringify（$（＆＃34; #myForm＆＃34;）。serializeArray（））代码时，它返回以下内容：

<form id="myForm" method="POST">        
    <input type="text" name="matrix[]" value="1"/><br/>
    <input type="text" name="matrix[]" value="2"/><br/>
    <input type="text" name="matrix[]" value="3"/><br/>     
    <input type="text" name="multi_matrix[colors][]" value="red"/><br/>
    <input type="text" name="multi_matrix[colors][]" value="blue"/><br/>        
    <input type="text" name="multi_matrix[weight][]" value="75"/><br/>
    <input type="text" name="multi_matrix[weight][]" value="83"/><br/>      
    <input type="submit" value="Send">
</form>

正如您所看到的，所有字段都有一个单独的条目，但我想将它们连接在一起以获得以下内容：

[{"name":"matrix[]","value":"1"},{"name":"matrix[]","value":"2"},{"name":"matrix[]","value":"3"},{"name":"multi_matrix[colors][]","value":"red"},{"name":"multi_matrix[colors][]","value":"blue"},{"name":"multi_matrix[weight][]","value":"75"},{"name":"multi_matrix[weight][]","value":"83"}]

是否有可以执行此操作的内置函数？或者我是否必须遍历所有字段并自己手动创建JSON？

Answer 1

您可以根据this answer扩展jQuery并创建类似serializeArray()中完成的UDF序列化对象：

$.fn.serializeObject = function()
{
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name] !== undefined) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};

Answer 2

我的变体：

＆＃13;

arr = $("#myForm").serializeArray();

var res={};
var m,o;
arr.forEach(function(item){
	m = item.name.match(/[^\]\[]+/g);
	o = res;
	m.forEach(function(v,i,a){
		if(o[v] === undefined) {
			if(i+1 !== a.length) {
				o[v] = {};
				o = o[v];
				return;
			}
			o[v] = [item.value];
		} else {
			if(i+1 !== a.length) {
				o = o[v];
				return;
			}
			o[v].push(item.value);
		}
	});
})

console.log(res)
$('<pre>'+JSON.stringify(res)+'</pre>').appendTo('#result')

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<form id="myForm" method="POST">        
    <input type="text" name="matrix[]" value="1"/><br/>
    <input type="text" name="matrix[]" value="2"/><br/>
    <input type="text" name="matrix[]" value="3"/><br/>     
    <input type="text" name="multi_matrix[colors][]" value="red"/><br/>
    <input type="text" name="multi_matrix[colors][]" value="blue"/><br/>        
    <input type="text" name="multi_matrix[weight][]" value="75"/><br/>
    <input type="text" name="multi_matrix[weight][]" value="83"/><br/>     
    <input type="text" name="multi_matrix[weight_real][]" value="83.32"/><br/>   
    <input type="text" name="multi_matrix[weight_real][]" value="83.65"/><br/>       
    <input type="text" name="multi_matrix[price][unreal][]" value="383.32"/><br/>   
    <input type="text" name="multi_matrix[price][unreal][]" value="183.65"/><br/>    
    <input type="submit" value="Send">
</form>
<div id="result"></div>

＆＃13;

{
    "matrix": ["1", "2", "3"],
    "multi_matrix": {
        "colors": ["red", "blue"],
        "weight": ["75", "83"],
        "weight_real": ["83.32", "83.65"],
        "price": {
            "unreal": ["383.32", "183.65"]
        }
    }
}

将表单字段转换为JSON对象

2 个答案: