Question

我的表格价值如下

<input name="Document[0][category]" value="12" type="text"> 
<input name="Document[0][filename]" value="abca.png"  type="text" >

我想通过js或jquery将它序列化为一个对象。

Document[0]={
   category : 12
   filename : 'abca.png'
};

我尝试使用serializeArray并解析对象，但没有好的

Answer 1

低技术方法：

＆＃13;

var Document = [];
var inputs = document.querySelectorAll('input');
Array.prototype.forEach.call(inputs, function(input) {
  var name = input.getAttribute('name');
  var prevProp = null;
  var obj = Document;
  name.replace(/\[(.*?)\]/g, function(m, prop) {
    if (prevProp) obj = obj[prevProp] || (obj[prevProp] = {});
    prevProp = prop;
  });
  obj[prevProp] = input.value;
});
console.log(Document);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input name="Document[0][category]" value="12" > 
<input name="Document[0][filename]" value="abca.png" >
</form>

<!-- results pane console output; see http://meta.stackexchange.com/a/242491 -->
<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>

＆＃13;

编辑：正如guest271314所述，使用Document作为变量名称可能不是最好的主意。

Answer 2

检查出来

$.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;
};

$(function() {
    $('form').submit(function() {
        $('#result').text(JSON.stringify($('form').serializeObject()));
        return false;
    });
});

form {
    line-height: 2em;
}
p {
    margin: 5px 0;
}
h2 {
    margin: 10px 0;
    font-size: 1.2em;
    font-weight: bold
}
#result {
    margin: 10px;
    background: #eee;
    padding: 10px;
    height: 40px;
    overflow: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h2>Form</h2>
<form action="" method="post">
First Name:<input type="text" name="Fname" maxlength="12" size="12"/> <br/>
Last Name:<input type="text" name="Lname" maxlength="36" size="12"/> <br/>
Gender:<br/>
Male:<input type="radio" name="gender" value="Male"/><br/>
Female:<input type="radio" name="gender" value="Female"/><br/>
Favorite Food:<br/>
Steak:<input type="checkbox" name="food[]" value="Steak"/><br/>
Pizza:<input type="checkbox" name="food[]" value="Pizza"/><br/>
Chicken:<input type="checkbox" name="food[]" value="Chicken"/><br/>
<textarea wrap="physical" cols="20" name="quote" rows="5">Enter your favorite quote!</textarea><br/>
Select a Level of Education:<br/>
<select name="education">
<option value="Jr.High">Jr.High</option>
<option value="HighSchool">HighSchool</option>
<option value="College">College</option></select><br/>
Select your favorite time of day:<br/>
<select size="3" name="TofD">
<option value="Morning">Morning</option>
<option value="Day">Day</option>
<option value="Night">Night</option></select>
<p><input type="submit" /></p>
</form>
<h2>JSON</h2>
<pre id="result">
</pre>

在此处找到：http://jsfiddle.net/sxGtM/3/

Answer 3

考虑jQuery＆＃39; serializeArray()函数：

var results = $("#some_id").serializeArray();

这将为您提供一系列可在JavaScript中使用的对象。我不认为您能够为这些对象提供自定义名称，就像您在这里尝试做的那样我假设：

<input name="Document[0][category]" value="12" type="text"> 
             ^^^^^^^^^^^

如果您需要来命名这些结果，我建议您使用jQuery对其进行序列化，然后将该数据传输到您自己的对象。

Working Fiddle

将DOM元素转换为对象

3 个答案: