将表单数据序列化为 JSON [重复]

这是此用例的函数：

function getFormData($form){
    var unindexed_array = $form.serializeArray();
    var indexed_array = {};

    $.map(unindexed_array, function(n, i){
        indexed_array[n['name']] = n['value'];
    });

    return indexed_array;
}

用法：

var $form = $("#form_data");
var data = getFormData($form);

你可以这样做：

函数 onSubmit( 表单 ){ var data = JSON.stringify( $(form).serializeArray() ); // <----------- console.log(data);返回假； //不要提交 }

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

下面的代码应该可以帮助你。 :)

 //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>

利用：

var config = {};
jQuery(form).serializeArray().map(function(item) {
    if ( config[item.name] ) {
        if ( typeof(config[item.name]) === "string" ) {
            config[item.name] = [config[item.name]];
        }
        config[item.name].push(item.value);
    } else {
        config[item.name] = item.value;
    }
});

我知道这不符合辅助函数要求，但我这样做的方法是使用 jQuery 的 $.each() 方法

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

然后我可以将 loginFormObject 传递给我的后端，或者您也可以创建一个用户对象并将其保存（）到主干中。

为了解决同样的问题（验证而不涉及复杂的插件和库），我创建了 jQuery.serializeJSON，它改进了 serializeArray 以支持任何类型的嵌套对象。

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

我找不到可以解决此问题的答案：

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

也许它会帮助某人。

如果您不关心具有相同名称的重复表单元素，那么您可以执行以下操作：

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

我在这里使用 Underscore.js。

这是我在这种情况下使用的模块（在我的 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"}

如果您使用 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;
}

使用 Underscore.js：

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

使用 jQuery 并避免 serializeArray，以下代码序列化并以 JSON 格式发送表单数据：

$("#commentsForm").submit(function(event){
    var formJqObj = $("#commentsForm");
    var formDataObj = {};
    (function(){
        formJqObj.find(":input").not("[type='submit']").not("[type='reset']").each(function(){
            var thisInput = $(this);
            formDataObj[thisInput.attr("name")] = thisInput.val();
        });
    })();
    $.ajax({
        type: "POST",
        url: YOUR_URL_HERE,
        data: JSON.stringify(formDataObj),
        contentType: "application/json"
    })
    .done(function(data, textStatus, jqXHR){
        console.log("Ajax completed: " + data);
    })
    .fail(function(jqXHR, textStatus, errorThrown){
        console.log("Ajax problem: " + textStatus + ". " + errorThrown);
    });
    event.preventDefault();
});

好吧，这是一个方便的插件：https://github.com/macek/jquery-serialize-object

它的问题是：

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

我的贡献：

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);

找到了一个可能的帮手：

https://github.com/theironcook/Backbone.ModelBinder

对于根本不想接触表单的人：https://github.com/powmedia/backbone-forms

我将仔细查看第一个链接，然后提供一些反馈:)