将表单序列化为 JSON | CSS-Tricks

Luca

# 2009 年 9 月 6 日

这根本不是“javascript”。这是一个 jQuery 代码片段。

GURU

评论永久链接# 2011 年 1 月 14 日

这是 Javascript，因为 jQuery 是一个使用 Javascript 作为语言的框架！

像你这样的傻瓜不应该被允许发布评论！

Yann

# 2012 年 11 月 13 日

哇哦，感谢 Luca 提供了非常有用的评论。
顺便说一句，因为你似乎非常热衷于指出不相关的细节
那么你应该正确地编写 JavaScript。

上面的代码片段无法正确处理嵌套表单对象，
以下 jQuery 可以更好地解决它

(function(jQuery){


jQuery.fn.MytoJson = function(options) {

    options = jQuery.extend({}, options);

    var self = this,
        json = {},
        push_counters = {},
        patterns = {
            "validate": /^[a-zA-Z][a-zA-Z0-9_]*(?:\[(?:\d*|[a-zA-Z0-9_]+)\])*$/,
            "key":      /[a-zA-Z0-9_]+|(?=\[\])/g,
            "push":     /^$/,
            "fixed":    /^\d+$/,
            "named":    /^[a-zA-Z0-9_]+$/
        };


    this.build = function(base, key, value){
        base[key] = value;
        return base;
    };

    this.push_counter = function(key){
        if(push_counters[key] === undefined){
            push_counters[key] = 0;
        }
        return push_counters[key]++;
    };

    jQuery.each(jQuery(this).serializeArray(), function(){

        // skip invalid keys
        if(!patterns.validate.test(this.name)){
            return;
        }

        var k,
            keys = this.name.match(patterns.key),
            merge = this.value,
            reverse_key = this.name;

        while((k = keys.pop()) !== undefined){

            // adjust reverse_key
            reverse_key = reverse_key.replace(new RegExp("\\[" + k + "\\]$"), '');

            // push
            if(k.match(patterns.push)){
                merge = self.build([], self.push_counter(reverse_key), merge);
            }

            // fixed
            else if(k.match(patterns.fixed)){
                merge = self.build([], k, merge);
            }

            // named
            else if(k.match(patterns.named)){
                merge = self.build({}, k, merge);
            }
        }

        json = jQuery.extend(true, json, merge);
    });


    return json;
}

})(jQuery);

Jona

评论永久链接# 2014 年 1 月 28 日

非常感谢 yann。它适用于表单中的复杂数组。
Tom

评论永久链接# 2015 年 3 月 30 日

太棒了，Luca。Javascript 是语言，jQuery 是一个为/用 javascript 编写的第三方软件包。这一点是相关的，因为存在区别。

Chris Coyier

# 2009 年 9 月 6 日

已移动。

Craig

# 2009 年 10 月 4 日

我刚接触 JQuery，这可能是一个愚蠢的要求，但你能提供一个使用示例吗？它是否类似于 $("#myForm").serializeObject？

Virgil Spruit

评论永久链接# 2010 年 8 月 11 日

不要忘记在你的输入中使用 name 属性。
ghanshyam

评论永久链接# 2013 年 3 月 11 日

使用这个
var myformdata = $(“#myForm”).serializeObject();

Maxim

# 2010 年 9 月 13 日

这个库做得更好（当然它会稍微大一点）
http://code.google.com/p/form2js/

Sven

评论永久链接# 2010 年 11 月 16 日

谢谢！

game

# 2010 年 10 月 2 日

我仍然不太理解。

maharshi

评论永久链接# 2014 年 7 月 24 日

我也是

Ignacio

# 2011 年 5 月 20 日

嗨，我正在使用一个 Flash 图库，我必须将其集成到一个新的客户的网站中。

该图库生成一个 JSON 文件，如下所示
{"gallery":{"items":[{"description":"","link":"","thumb":"gallery/images/t2.jpg","target":"","source":"gallery/images/1.jpg"}, {"description":"","link":"","thumb":"gallery/images/t2.jpg","target":"","source":"gallery/images/2.jpg"}, {"description":"","link":"","thumb":"gallery/images/t3.jpg","target":"","source":"gallery/images/3.jpg"}, {"description":"","link":"","thumb":"gallery/images/t4.jpg","target":"","source":"gallery/images/4.jpg"}, {"description":"","link":"","thumb":"gallery/images/t5.jpg","target":"","source":"gallery/images/5.jpg"}], "settings":{"background":{"bgColor":16777215,"transparentBG":true},"image":{"scaleMode":"fill","cornerRadius":10,"transitionDuration":1,"align":"center","transitionEffect":"fit","useShadow":true},"caption":{"position":"bottom","bgColor":0,"color":16777215,"visibleMode":"onRollOver","bgAlpha":30,"fontName":"Arial","fontSize":11},"preview":{"usePreview":true,"alpha":100,"outlineColor":0,"height":100,"cornerRadius":10,"width":200,"useShadow":true},"slideshow":{"start":false,"delay":2.5,"loop":true,"stopAutoOnClick":true},"dimensions":{"height":385,"width":470},"thumbBar":{"scrollSpeed":10,"position":"bottom","useThumbBar":true},"preloader":{"alpha":80,"usePreloader":true},"thumbnail":{"cornerRadius":0,"useShadow":true,"outlineColor":3355443,"outlineColorOnRollOver":6710886,"height":45,"alpha":70,"width":60,"outlineColorOnClick":10066329},"buttons":{"position":"right","fullScreenButton":true,"navigationButtons":true,"slideshowButton":true}}},"galleryName":"Art Gallery"}

谁能向我展示从 html 中表单插入值的代码？

提前感谢

jeremy

# 2011 年 7 月 18 日

@Ignacio – 您需要遍历从此函数创建的 json 对象，然后创建一个您复制项目的另一个变量。

Dema

# 2011 年 9 月 6 日

大家好，
我想知道 jquery 中是否有用于输入和输出日期的表单预订，我想找到一些教程。
我想用它来预订房间

非常感谢

Idham

# 2012 年 2 月 12 日

此代码片段至今仍然有用。

Marcio

# 2012 年 3 月 19 日

当我执行 alert 时，我的结果会在每个 json 项目中重复值

MarioMC

# 2012 年 5 月 25 日

伙计，谢谢你。我从这里开始，然后被评论中的一些链接分散了注意力，在互联网上兜兜转转后，我又回到了这里，这是唯一真正有效的解决方案。

非常感谢，感谢您！

Jesse Donat

# 2012 年 6 月 20 日

似乎不适用于名为 start[125] 的字段

我得到了

{
"start[125]":""
}

而不是期望的

{
"start":{"125":""}
}

Posni

# 2012 年 9 月 17 日

这似乎是从 Stackoverflow 复制的（从日期判断）：http://stackoverflow.com/questions/1184624/convert-form-data-to-js-object-with-jquery

DMC

评论永久链接# 2012 年 11 月 21 日

我认为你错过了分享代码片段的意义……

nicolas

# 2013 年 8 月 18 日

对这部分感到困惑
if (!o[this.name].push)

我还不擅长这个，抱歉~

Assis

# 2013 年 11 月 20 日

人们应该始终对他人生存善意。粗鲁的人不应该被允许发布评论。

Corey Rothwell

# 2013 年 12 月 3 日

对于简单的表单来说，效果很棒！谢谢！

rajesh

# 2014 年 1 月 2 日

我需要从 json 对象创建一个新的 json 格式。

这里我有以下 json 对象结果

[
{
“Location.Country”: “India”,
“Location.City”: “Chennai”,
“Location.Office”: “Shriram IT Gateway”,
“countstar”: 243
},
{
“Location.Country”: “India”,
“Location.City”: “Chennai”,
“Location.Office”: “MEPZ”,
“countstar”: 173
},
{
“Location.Country”: “Australia”,
“Location.City”: “Sydney”,
“Location.Office”: “CSS Australia”,
“countstar”: 1
},
{
“Location.Country”: “India”,
“Location.City”: “Bangalore”,
“Location.Office”: “Glow Network”,
“countstar”: 9
},
{
“Location.Country”: “United States”,
“Location.City”: “Richardson”,
“Location.Office”: “Dallas”,
“countstar”: 17
},
{
“Location.Country”: “India”,
“Location.City”: “Chennai”,
“Location.Office”: “West Wing”,
“countstar”: 174
},
{
“Location.Country”: “United States”,
“Location.City”: “Utah”,
“Location.Office”: “Utah”,
“countstar”: 29
}
]

转换为新格式

{
“name”:”Locations”,
“children”:[
{
“name”:”india”,
“children”:[
{
“name”:”Chennai”,
“children”:[
{
“name”:”Shriram IT Gateway”,
“size”:1541
},
{
“name”:”Mainwing”,
“size”:1170
},
{
“name”:”Ambit”,
“size”:4626
},
{
“name”:”Mepz”,
“size”:1296
}
]
},
{
“name”:”Bangalore”,
“children”:[
{
“name”:”ITPL Bangalore”,
“size”:5
},
{
“name”:”Banaglore”,
“size”:241
}
]
},
{
“name”:”Hyderabad”,
“size”:87
},
{
“name”:”Coimbatore”,
“size”:29
},
{
“name”:”Perungalathur”,
“size”:67
},
{
“name”:”Glow Network”,
“size”:122
}
]
},
{
“name”:”United States”,
“children”:[
{
“name”:”Dallas”,
“size”:299
},
{
“name”:”Texas”,
“size”:8
},
{
“name”:”Newyork”,
“size”:49
},
{
“name”:”Boston”,
“size”:10
},
{
“name”:”Utah”,
“size”:399
},
{
“name”:”Washington”,
“size”:2
},
{
“name”:”Sanjose”,
“size”:97
}
]
}
}

rajesh

# 2014 年 1 月 2 日

请帮帮我？

Mario

# 2014 年 1 月 7 日

此 jQuery 插件处理表单到 JSON 的简单和复杂转换
https://github.com/marioizquierdo/jquery.serializeJSON

用法：$(“form”).serializeJSON()

Andrew

评论永久链接# 2014 年 11 月 26 日

这是一个很好的插件，并且非常灵活（例如能够包含未选中的复选框），但是当解析多选下拉列表时，如果只选择了一个项目，它不会将其添加到数组中，而是将其简单地设置为一个值，在我使用过的许多 REST 端点中，它期望 JSON 中是一个数组，无论有多少元素。
这可以追溯到 serializeArray 插件（我假设该插件是基于它的），它不会跟踪该输入元素是否是多选下拉列表，而是简单地输出每个选中选项的所有键值对，然后当您想要创建 JSON 输出时，除非您在迭代时再次检查相应的表单输入，否则无法找出它是否是多选下拉列表，以及它是否需要放在数组中。这很容易解决，但似乎 serializeArray 作为更复杂用例的起点有点没有意义。

manoj

# 2016年6月2日

是否可以创建一个使用 JSON 中 CSS 样式的表单

评论

发表评论 取消回复

发表评论取消回复