如何把一个表单form变成Json对象

2016-09-12 15:29:00

在很多情况下，我们需要把一个表单变成一个Json对象。例如在登录页面，有用户名和密码2个输入框，期望通过一个方法将其转换为如下Json对象：

{
"Username":"TestName",
"Password":"TestPwd"
}

这样可以更轻松地传递数据以及在Js中调用表单数据。

实现所需函数

在实现该方法之前，需要了解以下几个函数：

• serializeArray()
• JSON.stringify
• JSON.parse

具体代码实现

var queryArray = $(formElement).serializeArray();
var jsonString= '{';
for (var i = 0; i < queryArray.length; i++) {
    jsonString+= JSON.stringify(queryArray[i].name) + ':' + JSON.stringify(queryArray[i].value) + ',';
}
jsonString= jsonString.substring(0, (jsonString.length - 1));
jsonString+= '}';
return JSON.parse(jsonString)

代码说明

1. 通过$(formElement).serializeArray()将表单元素序列化为包含name和value属性的数组queryArray。
2. 初始化jsonString为'{'，遍历数组，逐一生成键值对字符串（键和值均通过JSON.stringify进行转义处理），并以逗号分隔。
3. 遍历结束后，移除最后一个多余的逗号，添加'}'完成JSON字符串拼接。
4. 最后通过JSON.parse将JSON字符串转换为JSON对象返回。

通过以上代码转换，可轻松使用生成的JSON对象。