将表单数据序列化为JSON

我想在Backbone.js模型中对表单进行一些服务器前验证。为此，我需要将用户输入的表单转换为可用的数据。我找到了三种方法:

var input = $（“#inputId”）.val（）; var input = $（“form.login”）.serialize（）; var input = $（“form.login”）.serializeArray（）;

不幸的是，没有一个提供我所需要的良好的可读和可开发的JSON对象。我已经浏览了Stack Overflow上的几个问题，但我只找到了一些额外的库。

现在的jQuery或Backbone.js没有提供一个辅助方法吗?

我无法想象没有对这种功能的要求。

HTML

<form class="login">
    <label for="_user_name">username:</label>
    <input type="text" id="_user_name" name="user[name]" value="dev.pus" />
    <label for="_user_pass">password:</label>
    <input type="password" id="_user_pass" name="user[pass]" value="1234" />
    <button type="submit">login</button>
</form>

JavaScript

var formData = $("form.login").serializeObject();
console.log(formData);

输出

{
    "name": "dev.pus",
    "pass": "1234"
}

Backbone.js模型

var user = new User(formData);
user.save();

当前回答

我知道这并不满足helper函数的要求，但是我使用jQuery的$.each()方法实现了这一点

var loginForm = $('.login').serializeArray();
var loginFormObject = {};
$.each(loginForm,
    function(i, v) {
        loginFormObject[v.name] = v.value;
    });

然后我可以将loginFormObject传递到我的后端，或者您可以创建一个userobject并将其保存在骨干中。

2013-03-01 19:03:29

其他回答

为了解决同样的问题(在不涉及复杂插件和库的情况下进行验证)，我创建了jQuery。serializeJSON，它改进了serializeArray以支持任何类型的嵌套对象。

这个插件非常流行，但在另一个项目中，我使用了Backbone.js，我想在Backbone.js模型中编写验证逻辑。然后我创建了Backbone。Formwell，它允许您在表单中直接显示验证方法返回的错误。

2014-01-08 03:18:43

如果你不关心具有相同名称的重复表单元素，那么你可以这样做:

var data = $("form.login").serializeArray();
var formData = _.object(_.pluck(data, 'name'), _.pluck(data, 'value'));

我在这里使用的是Underscore.js。

2013-12-14 18:31:25

使用Underscore.js:

function serializeForm($form){
    return _.object(_.map($form.serializeArray(), function(item){return [item.name, item.value]; }));
}

2014-10-05 22:14:44

我找不到一个可以解决这个问题的答案:

[{name:"Vehicle.Make", value: "Honda"}, {name:"Vehicle.VIN", value: "123"}]

调用这个对象:

{Vehicle: {Make: "Honda", "VIN": "123"}}

所以我必须自己写一个序列化器来解决这个问题:

function(formArray){
        var obj = {};
        $.each(formArray, function(i, pair){
            var cObj = obj, pObj, cpName;
            $.each(pair.name.split("."), function(i, pName){
                pObj = cObj;
                cpName = pName;
                cObj = cObj[pName] ? cObj[pName] : (cObj[pName] = {});
            });
            pObj[cpName] = pair.value;
        });
        return obj;
    }

也许它会帮助别人。

2014-08-11 09:28:50

下面是我在这种情况下作为模块使用的(在我的formhelper.js中):

define(function(){
    FormHelper = {};

    FormHelper.parseForm = function($form){
        var serialized = $form.serializeArray();
        var s = '';
        var data = {};
        for(s in serialized){
            data[serialized[s]['name']] = serialized[s]['value']
        }
        return JSON.stringify(data);
    }

    return FormHelper;
});

我似乎找不到另一种方法来做我想做的事情，这有点糟糕。

这确实为我返回了这个JSON:

{"first_name":"John","last_name":"Smith","age":"30"}

2013-11-20 11:46:26

将表单数据序列化为JSON

推荐文章

最新文章

标签