当前位置：Gxlcms > JavaScript > 将JavaScript的jQuery库中表单转化为JSON对象的方法_jquery

将JavaScript的jQuery库中表单转化为JSON对象的方法_jquery

时间：2021-07-01 10:21:17 帮助过：4人阅读

大家知道Jquery中有serialize方法，可以将表单序列化为一个“&”连接的字符串，但却没有提供序列化为Json的方法。不过，我们可以写一个插件实现。

我在网上看到有人用替换的方法，先用serialize序列化后，将&替换成“：”、“‘”：

个人感觉这样做有bug。
我的方法是，先用serializeArray序列化为数组，再封装为Json对象。
下面是表单：

Jquery插件代码如下：

下面测试一下：

测试结果：
输入a，b提交，得到序列化结果

上面的插件，不能适用于有多个值的输入控件，例如复选框、多选的select。下面，我将插件做进一步的修改，让其支持多选。代码如下：

这里，我将多选的值封装为一个数值来进行处理。如果大家使用的时候需要将多选的值封装为“,"连接的字符串或者其他形式，请自行修改相应代码。

测试如下：
表单：

< form id = "myForm" action = "#" >
< input name = "name" />
< input name = "age" />
< select multiple = "multiple" name = "interest" size = "2" >
< option value = "interest1" > interest1 
< option value = "interest2" > interest2 
< option value = "interest3" > interest3 
< option value = "interest4" > interest4 

< input type = "checkbox" name = "vehicle" value = "Bike" /> I have a bike
< input type = "checkbox" name = "vehicle" value = "Car" /> I have a car
< input type = "submit" />

测试结果：

处理序列化时的空格问题

jquery的 serialize()方法，可以对表单项进行序列化，这本来是很方便的一个功能；但是实际使用中有时会出现如下问题：

例如

在执行 serialize()方法后，得到的却是 ddd+567这样的字符串；即jquery的序列化方法对空格进行了转义，转换成了 + 号。

解决方法

由于serialize()方法对真正的“+”号转义的是％２Ｂ，所以可以对serialize()后的结果进行符号替换。

例如

将JavaScript的jQuery库中表单转化为JSON对象的方法_jquery

人气教程排行