使用JQuery将表单解析为JSON对象并考虑子JSON对象

时间:2014-12-01 10:21:56

标签: javascript jquery html json

我正在尝试从提交数据中提取数据,为此我使用了jquery serializeArray()函数。哪个工作非常好,并将输出作为{name:value}对象的数组。这个名称与我在每个元素的表单中给出的名称相似。但是我想在副子文档中使用很少的字段(名称)。例如

HTML

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<form class="login">
    <label for="_user_name">username:</label>
    <input type="text" id="_user_name" name="user.name" value="dev.pus" />
    <label for="_user_pass">password:</label>
    <input type="password" id="_user_pass" name="user.pass" value="1234" />
    <button type="submit">login</button>
</form>
</body>
</html>

的JavaScript

var docFormParams = $("form.login"),
         docData = docFormParams.serializeArray();


var finalJson ={};

 for (var i = 0; i < docData.length; i++) {
     finalJson[docData[i].name] = docData[i].value;

 }

console.log(JSON.parse(JSON.stringify(finalJson)));

输出

[object Object] {
  user.name: "dev.pus",
  user.pass: "1234"
}
finalJson
[object Object] {
  user.name: "dev.pus",
  user.pass: "1234"
}
finalJson.user
undefined
[object Object] {
  user.name: "dev.pus",
  user.pass: "1234"
}

我想要的输出:

{
user :{name :"dev.pus",
       pass :"1234"

      }    
}

正如你所看到的,我已尝试将dot放入名称,但它不起作用。有什么办法解决这个问题?感谢

2 个答案:

答案 0 :(得分:1)

$("form.login").serializeArray();  

将返回一个数组:

[{"name":"user.name","value":"dev.pus"},{"name":"user.pass","value":"1234"}]

你应该&#34;分裂&#34; &#34;名称&#34;每个元素,或更改&#34; name&#34;在输入。 使用&#34; split&#34;:http://jsfiddle.net/n1su1q0h/

的示例

答案 1 :(得分:0)

尝试通过从表单中提取值来构建Javascript对象。然后你可以序列化它:

obj = { "user": { "name": $('#_user_name').val(),
                  "pass": $('#_user_pass').val()
                }
      };
alert(JSON.stringify(obj));