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

Posted

技术标签:

【中文标题】将表单数据序列化为 JSON [重复]【英文标题】:Serialize form data to JSON [duplicate] 【发布时间】:2012-07-05 12:42:35 【问题描述】:

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

    var input = $("#inputId").val(); var input = $("form.login").serialize(); var input = $("form.login").serializeArray();

不幸的是,没有一个提供我需要的良好的可重复和可开发的 JSON 对象。我已经查看了有关 *** 的几个问题,但只发现了一些额外的库。

Underscore.js,当前的 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 有一个 JSON 插件:code.google.com/p/jquery-json,它不包含辅助方法。 .serializeArray() 有什么问题? 表单需要它,我只是想知道三个框架不提供表单映射器...... 关于重复标记This question already has an answer here:JSON不是javascript对象,它的序列化对象 @xdazz 也许他们想要 "name": "value" 而不是 "name": "input_name", "value": "input_value" 【参考方案1】:

你可以这样做:

function onSubmit( form )
  var data = JSON.stringify( $(form).serializeArray() ); //  <-----------

  console.log( data );
  return false; //don't submit
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form onsubmit='return onSubmit(this)'>
  <input name='user' placeholder='user'><br>
  <input name='password' type='password' placeholder='password'><br>
  <button type='submit'>Try</button>
</form>

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

【讨论】:

嗨,不完全是。我得到类似 "name": "user[name]" value: "dev.pus" 但我想要 "name": "dev.pus", "password": "1234" 等。跨度> @dev.pus:您可能需要以 ["name":"username","value":"foo"] 格式处理它。否则,您将无法处理具有相同名称的多个元素。 如果您没有多个具有相同名称的元素,您可以轻松地将表单数据转换为 JSON 字符串,如下所示:var myjson = ; $.each(allFormTags, function() myjson[this.name] = this.value; ); 如前所述,这给出了name=foo value=boo 对,而不仅仅是foo=boo - 来自@Maciej Pyszyński 的回答似乎更合适 这不好用..:3【参考方案2】:

下面是这个用例的一个函数:

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

【讨论】:

代码会覆盖同名的键。您应该检查 indexed_array[n['name']] 是否已经存在,以及是否将其转换为数组并在那里添加 n['value'] 。当然你还需要检查 indexed_array[n['name']] 是否已经是一个数组。 name 应该始终是唯一的(单选按钮,只能有一个值!),如果不是 - 只有最后一次出现的具有重复名称的字段与请求一起发送。如果要创建多级数组结构,则必须检测方括号并从该信息中构建多维数组。提示:将字段名称的第一部分用括号括起来,例如somefield[2] =&gt; [somefield][2] 并使用 eval 赋值 eval('you_array_varialbe'+bracketed_field_name+'=\''+n['value']+'\'') "名称应该是唯一的"... Ummm... 复选框组? 很好,这应该被标记为正确答案。 @DaniëlCamps 是对的。选择多个选项的<select multiple> 将失败。【参考方案3】:

找到一个可能的帮手:

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

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

我会仔细查看第一个链接,然后给出一些反馈:)

【讨论】:

见***.com/questions/1184624/…: var data = ; $(".form-selector").serializeArray().map(function(x)data[x.name] = x.value;); 这里是单行: $("form.login").serializeArray().reduce( (f,c) => f[c.name]=c.value;返回 f;, );【参考方案4】:

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

【讨论】:

【参考方案5】:

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

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

然后我可以将 loginFormObject 传递给我的后端,或者您也可以创建一个用户对象并在主干中保存()它。

【讨论】:

这很好,很简单,似乎非常适合我现在的需求。干得好! 我自己尝试使用它作为其他问题的解决方法,但我在这里发现了一个问题。在通过 ASP.NET MVC(Razor 样式视图)完成的网站上,代码生成一个可见的复选框输入和一个隐藏的输入。使用您的代码,loginForm 包含两个输入(如果复选框被选中,false 仅其他)和loginFormObject 之后得到第二个输入,始终是false。此处解决方法:在each的子函数中,在后面添加如下一行:if(formObject[v.name] != "true")。这将保留true【参考方案6】:

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

【讨论】:

你确定一个表单是否有多个相同键的值。这个函数只会保留最后一个值吗?【参考方案7】:

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

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

我在这里使用Underscore.js。

【讨论】:

【参考方案8】:

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

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

【讨论】:

太棒了,正是我需要的!【参考方案9】:

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

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

【讨论】:

非常感谢!有人知道这是否适用于上传文件吗? @AaronMatthews 上传文件使用 Blob 对象。因此不会工作 这个函数不仅是“基于”的,它来自那个链接的函数。好东西CSS tricks gives you permission。 这太棒了!也可以使用 MVC 表单,因为复选框是使用 2 个输入呈现的(一个隐藏的值为 false),并且通过这种数据序列化,另一端的控制器可以开箱即用.... 很好的解决方案。【参考方案10】:

使用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();
);

【讨论】:

【参考方案11】:

我的贡献:

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

【讨论】:

当有内置函数为您执行此操作时,我认为手动构建 JSON 字符串不是一个好主意。这充满了潜在的错误。【参考方案12】:

用途:

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

【讨论】:

这不是一个通用的解决方案;一个表单可以对同一个键有多个值。这个函数只会保留最后一个值。 确实,修改了答案 - 谢谢 最后一个值是标准方式,对于覆盖以前的值非常有用。【参考方案13】:

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

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

也许它会对某人有所帮助。

【讨论】:

【参考方案14】:

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

它的问题是:

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

在 >= 2.1.0 中期待这些

【讨论】:

【参考方案15】:

使用Underscore.js:

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

【讨论】:

这不是一个通用的解决方案;一个表单可以对同一个键有多个值。这个函数只会保留最后一个值。

以上是关于将表单数据序列化为 JSON [重复]的主要内容,如果未能解决你的问题,请参考以下文章

HTML/Javascript 表单 如何将表单数据序列化为 JSON 并在类中显示?

将表单数据序列化为 JSON 时如何保留值类型

将多维表单数据序列化为 JSON 对象数组以使用 application/json

如何将表单中的复选框序列化为Json数据

如何将form内的表单序列化为json字符串

将表单序列化为没有空值的 json