如何使用 MooTools 将表单数据转换为对象答案

【问题标题】：How to convert form data to object using MooTools如何使用 MooTools 将表单数据转换为对象
【发布时间】：2010-01-29 23:40:10
【问题描述】：

我想将完整形式的数据转换为 javascript 对象。

<form id='myform'>
   <input type='text' name='field1' value='foo'>
   <input type='text' name='field2' value='bar'>
</form>

将转换为 javascript 对象...

{
   field1: 'foo',
   field2: 'bar'
}

【问题讨论】：

标签： javascript forms object mootools

【解决方案1】：

在 MooTools 中，您可以轻松地将所有表单值转换为对象：

var formObjects=$('myform').toQueryString().parseQueryString();

转换为 JSON：

var formJson=JSON.encode(formObjects);

【讨论】：

请注意，从 1.4.5 开始，parseQueryString 现在仅在 mootools 中更多。

【解决方案2】：

只需编写您自己的方法，基于 Element.toQueryString 的来源 - 类似这样（我知道方法名称是垃圾，但这是您最不担心的）

Element.implement({
    toJSON: function(){
        var json = {};
        this.getElements('input, select, textarea', true).each(function(el){
            if (!el.name || el.disabled || el.type == 'submit' || el.type == 'reset' || el.type == 'file') return;
            var value = (el.tagName.toLowerCase() == 'select') ? Element.getSelected(el).map(function(opt){
                return opt.value;
            }) : ((el.type == 'radio' || el.type == 'checkbox') && !el.checked) ? null : el.value;
            $splat(value).each(function(val){
                if (typeof val != 'undefined') {
                    json[el.name] = val;
                }
            });
        });
        return json;
    }
});

console.log($("myform").toJSON());

使用示例表单 - http://mootools.net/shell/ZSsVr/ 测试并正常工作 - 产生您要求的 exact 结果。

【讨论】：

比起公认的答案，我更喜欢这个答案，这有点小技巧，现在parseQueryString 需要更多 MooTools 的一部分。此代码与Element.toQueryString 非常相似，因此虽然意味着更多自定义代码，但它的性能不会更差。
值得注意的是，如果使用比 1.2 更新的 MooTools 版本，$splat 应替换为 Array.from
真的。这是 4 年前的回答

【解决方案3】：

我实际上喜欢 Dimitar Christoff 答案和 Trebla 的组合：

Element.implement({
    toJSON: function(){
        var j = {};
        Array.each(this.toQueryString().split('&'),function(a){
            var kv = a.split('=')
            j[kv[0]] = kv[1]||'';
        });
        return JSON.encode(j);
    }
});
console.log($('formular_support').toJSON());

【讨论】：

感谢@TimWhickstrom.com，这正是我一直在寻找的

【解决方案4】：

http://code.google.com/p/form2js/

检查一下，这正是您所需要的，但与框架无关

【讨论】：

【解决方案5】：

MooTools 不附带表单序列化工具；我知道，这很糟糕。

但是，我已经成功地使用了这个独立的实现：form2obj。

【讨论】：

哇哦。 sucks 有点强，考虑到编写这样的工具是什么问题，2 分钟？如果有帮助的话，您不应该做的就是恢复到更长的原版解决方案。

【解决方案6】：

一种方法。 -- 将其转换为 JSON 对象

var hm = $('myform').toQueryString();
    hm = '{"'+hm+'"}'; 
    hm = hm.replace(/&/g, '","');
    hm = hm.replace(/=/g, '":"');
    var jsn = JSON.decode(hm); // jsn is ur JSON object.

将其转换为哈希。

Mootools 有一种称为 Hash 的对象类型。您也可以通过执行以下操作来转换为。

哈希链接：http://mootools.net/docs/core/Native/Hash 它有 set 和 get 方法，你可以循环和做一些事情，检查链接。

var hm = $('myform').toQueryString();

var ar = hm.split('&');
var finalo = new Hash();
ar.each(function(a, aCounter)
{
    var tmp = a.split('=');
    finalo.set(tmp[0], tmp[1]);
});

// finalo is your Hash object. Use the get() method to extract values. Check the link given above.

【讨论】：