我想在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();

当前回答

如果你用JSON发送表单,你必须在发送字符串中删除[]。你可以用jQuery函数serializeObject()来实现:

var frm = $(document.myform);
var data = JSON.stringify(frm.serializeObject());

$.fn.serializeObject = function() {
    var o = {};
    //    var a = this.serializeArray();
    $(this).find('input[type="hidden"], input[type="text"], input[type="password"], input[type="checkbox"]:checked, input[type="radio"]:checked, select').each(function() {
        if ($(this).attr('type') == 'hidden') { //if checkbox is checked do not take the hidden field
            var $parent = $(this).parent();
            var $chb = $parent.find('input[type="checkbox"][name="' + this.name.replace(/\[/g, '\[').replace(/\]/g, '\]') + '"]');
            if ($chb != null) {
                if ($chb.prop('checked')) return;
            }
        }
        if (this.name === null || this.name === undefined || this.name === '')
            return;
        var elemValue = null;
        if ($(this).is('select'))
            elemValue = $(this).find('option:selected').val();
        else elemValue = this.value;
        if (o[this.name] !== undefined) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(elemValue || '');
        } else {
            o[this.name] = elemValue || '';
        }
    });
    return o;
}

其他回答

你可以这样做:

函数onSubmit(form){ var data = JSON。stringify($(form).serializeArray());// <----------- Console.log (data); 返回错误;/ /不提交 } < script src = " https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js " > < /脚本> <form onsubmit='return onsubmit (this)'> <input name='user' placeholder='user'><br> <input name='password' type='password' placeholder='password'><br> <按钮类型= '提交' > > < /按钮试试 > < /形式

请看这个:http://www.json.org/js.html

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

[{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;
    }

也许它会帮助别人。

这里有一个方便的插件:https://github.com/macek/jquery-serialize-object

问题是:

继续向前,在核心序列化之上,. serializeobject将支持布尔值和数字值的正确序列化,从而为这两种情况生成有效类型。 期待>= 2.1.0中的这些内容

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

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

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

我的贡献:

function serializeToJson(serializer){
    var _string = '{';
    for(var ix in serializer)
    {
        var row = serializer[ix];
        _string += '"' + row.name + '":"' + row.value + '",';
    }
    var end =_string.length - 1;
    _string = _string.substr(0, end);
    _string += '}';
    console.log('_string: ', _string);
    return JSON.parse(_string);
}

var params = $('#frmPreguntas input').serializeArray();
params = serializeToJson(params);