Jquery 转换序列化形式'；将数据转换为json对象

我有一个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 = JSON.parse($("#floorplan-form").serializeArray());

但我得到了这个错误：

Uncaught SyntaxError: Unexpected token o 

改变你的陈述

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

与

或

使用下面的代码

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

---

您可以使用：jquery.serializeToJSON- 它准备与表单ASP MVC一起使用

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

---

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

//serializeToJSON:：String->JSON
const serializeToJSON=str=>
str.split（“&”）
.map（x=>x.split（'='））
.reduce（（acc，[键，值]）=>({
…acc，
[键]：isNaN（值）？值：数字（值）
}), {})
console.log(
serializeToJSON（'foo=1&bar=2&baz=3'）
)

您可以使用它来生成包含所有表单字段的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);

---

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

JSON

类吗？现在的孩子们都喜欢用他们的jQuery。。。

JSON

对象是Javascript的一部分。与jQuery无关。要修改jQuery文件上传的formData，我只能通过第三种方法，谢谢你也可以使用

jQuery.each

代替

jQuery.map

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

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

var properJsonObj = jQFormSerializeArrToJson(serializedArr);

$('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;
});

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