冰冰的小屋

路漫漫其修远兮,吾将上下而求索

把表单数据转化为嵌套 json 数据对象

文章目录[隐藏]

首先感谢万能的 Google 和互联网的分享精神,然后感谢 Stack Overflow 和 GitHub。

最近在进行的项目,后端服务器需要前端把提交的表单的数据以 json 数据的形式发送给服务器,如果没处理每个数据是以 & 连接起来的,如下图。如果是 json 形式的,后端会比较好处理。

为了让数据转换为 json 形式,查看了大量的博客和网站,看到了好几种解决方案。

方案一

最先看到的方法是调用 jQuery 的方法序列化数据,然后转成 json 格式。具体实现如下

但这种用 alert 或者 console.log 打印出来,看到 json 的格式是每个数据都有 name 和 value 一一对应,如图

这种形式肯定不是我们想要的,所以继续找。必须是把 name 和value 过滤的。

方案二

找到一个博客,号称是 form 转 json 最佳示例

================================================================================================================================

jQuery 是在 web 应用中使用的脚本语言之一,因其具有轻量级, 易学易用等特点,已广泛应用,其中的 ajax 封装简化了我们的应用,对其表单数据序列化用如下方法:

1. serialize() 方法

格式:var data = $(“#formID”).serialize();

功能:将表单内容序列化成一个字符串。

这样在 ajax 提交表单数据时,就不用一一列举出每一个参数。只需将 data 参数设置为 $(“form”).serialize() 即可。

2. serializeArray() 方法

格式:var jsonData = $(“#formID”).serializeArray();

功能:将页面表单序列化成一个 JSON 结构的对象。注意不是 JSON 字符串。

比如,[{“name”:”lihui”},{…}] 获取数据为 jsonData[0].name

3. $.param() 方法,可以把 json 格式数据序列化成字符串形式

     varobj={a:1,b:2}

     vars=$.param(obj);

 会形成 a=1&b=2 的形式

此方法是在方案一的基础上修改的,集成的很好,很简单也容易移植。但我们的项目的 json 需要能够嵌套的。所以此方法,还是暂时先放放,如果不需要嵌套的话,这个还是挺好的。

方案三

目前为止的方案还是不能满足后端 json 数据能嵌套的需求,最后的在 Stack Overflow 里找到了我想要的。

里面有个哥们提的问题跟我的类似,排名第二的回答者在 GitHub 上创建了自己的项目 jquery-serialize-object,专门用来解决这个问题。

后面看到另一个哥们在 GitHub 的项目 jquery.serializeJSON 也不错,只是在 HTML 写嵌套的 name 需要注意是不同的标准,最后的效果是相同的。这两个都可以使用。

我最好采用的是方案三的第一种方法。

HTML 头部引用 js,HTML 上用方括号包涵会嵌套 json。

需要注意的是 ajax 需要添加 contentType: "application/json",

 

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注