将表单数据序列化为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();

当前回答

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

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

2014-01-08 03:18:43

其他回答

下面是我在这种情况下作为模块使用的(在我的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

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

2014-01-08 03:18:43

我知道这并不满足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

下面的代码可以帮助您。：）

 //The function is based on http://css-tricks.com/snippets/jquery/serialize-form-to-json/
 <script src="//code.jquery.com/jquery-2.1.0.min.js"></script>

<script>
    $.fn.serializeObject = function() {
        var o = {};
        var a = this.serializeArray();
        $.each(a, function() {
            if (o[this.name]) {
                if (!o[this.name].push) {
                    o[this.name] = [o[this.name]];
                }
                o[this.name].push(this.value || '');
            } else {
                o[this.name] = this.value || '';
            }
        });
        return o;
    };

    $(function() {
        $('form.login').on('submit', function(e) {
          e.preventDefault();

          var formData = $(this).serializeObject();
          console.log(formData);
          $('.datahere').html(formData);
        });
    });
</script>

2014-03-15 06:24:40

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

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

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

2013-12-14 18:31:25

将表单数据序列化为JSON

推荐文章

最新文章

标签