将序列化表单的数据转换为 json 对象

Posted 2023-05-08

【中文标题】将序列化表单的数据转换为 json 对象

【英文标题】：Converting serialized form's data to json object

【发布时间】：2014-06-10 19:27:30

【问题描述】：

我有一个类似下面的cshtml

@using (Html.BeginForm("Save", "Plans", FormMethod.Post, new  @class = "form-horizontal", id = "floorplan-form" ))

            @Html.TextBoxFor(m => m.FloorPlan.Name, new  placeholder = "Enter text", @class = "form-control" )

            @Html.DropDownListFor(m => m.FloorPlan.GroupId, new SelectList(Model.FloorPlanGroups, "Id", "Name"))             

在我的 javascript（在一个单独的 javascript 文件中）中，我正在尝试序列化此表单并将其转换为 JSON 对象。

var formData = $("#floorplan-form").serialize();
console.info(formData);

打印出来

FloorPlan.Name=Test&FloorPlan.GroupId=15 

还有

var formData = $("#floorplan-form").serializeArray();
console.info(formData);

给我：

我试过这样做

var formData = JSON.parse($("#floorplan-form").serializeArray());

但我收到此错误：

Uncaught SyntaxError: Unexpected token o 

【参考方案1】：

改变你的陈述

var formData = JSON.parse($("#floorplan-form").serializeArray());

与

var formData = JSON.stringify(jQuery('#frm').serializeArray()); // store json string

或

var formData = JSON.parse(JSON.stringify(jQuery('#frm').serializeArray())) // store json object

【讨论】：

是否需要添加对外部文件的引用？ jQuery 中包含 JSON 类吗？

这些天，哈哈，孩子们用他们花哨的 jQuery...JSON 对象是 Javascript 的built-in objects 的一部分。与jQuery无关。

要修改jquery文件上传的formData，只能通过第三种方法，谢谢

【参考方案2】：

使用下面的代码！！！

    var data = $("form").serialize().split("&");
    console.log(data);
    var obj=;
    for(var key in data)
    
        console.log(data[key]);
        obj[data[key].split("=")[0]] = data[key].split("=")[1];
    

    console.log(obj);

【讨论】：

如果你有一个序列化的字符串并且想将它转换回一个对象，这是正确的答案。提供更多解释而不是仅提供代码答案会很有帮助。

【参考方案3】：

function jQFormSerializeArrToJson(formSerializeArr)
 var jsonObj = ;
 jQuery.map( formSerializeArr, function( n, i ) 
     jsonObj[n.name] = n.value;
 );

 return jsonObj;

使用此功能。这仅适用于 jquery。

var serializedArr = $("#floorplan-form").serializeArray();

var properJsonObj = jQFormSerializeArrToJson(serializedArr);

【讨论】：

你也可以用jQuery.each代替jQuery.map

【参考方案4】：

您可以使用它来制作包含所有表单字段的 json。

jQuery 示例：

$('form').serializeArray().reduce(function(accumulator,currentValue, currentIndex)
    if(currentIndex === 1)
        var json = ;
        json[accumulator.name] = accumulator.value;
        return json;
    
    accumulator[currentValue.name] = currentValue.value;
    return accumulator;
);

带有 FormData 的纯 JavaScript：

var formdata = new FormData(document.querySelector('form'));
var getJsonFromFormData = (formData) => 
    var json = ;    
    for (item of formData.keys())
        json[item] = formData.get(item);
    
     return json;

var json = getJsdonFromFormData(formdata);

【参考方案5】：

您可以使用：jquery.serializeToJSON - https://github.com/raphaelm22/jquery.serializeToJSON 它已准备好与表单 ASP MVC 一起工作

【参考方案6】：

现代诠释。编译对象扩展运算符需要 babel stage-2 预设

// serializeToJSON :: String -> JSON
const serializeToJSON = str => 
  str.split('&')
    .map(x => x.split('='))
    .reduce((acc, [key, value]) => (
      ...acc,
      [key]: isNaN(value) ? value : Number(value)
    ), )

console.log(
  serializeToJSON('foo=1&bar=2&baz=three')
)

【参考方案7】：

您可以执行以下操作将序列化数据转换为 json 对象，这将采用表单中的字段数组并对其进行迭代，将键和值分配给新对象。

let uncleandata = $(this).serializeArray();
let data = ;
uncleandata.forEach(item=>
  data[item.name] = item.value;
);
console.log(data);

【讨论】：

最佳答案