Преобразование данных сериализованной формы в объект json

20

У меня есть 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 
    
задан Null Reference 25.04.2014 в 09:43
источник

6 ответов

28

Измените ваше заявление

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
    
ответ дан Hitesh Siddhapura 25.04.2014 в 10:08
  • Нужно ли добавлять ссылку на внешний файл? является ли класс JSON включенным в jQuery? –  Bellash 29.09.2014 в 11:32
  • @Bellash, не требуется внешний файл, jQuery включает объект JSON –  Hitesh Siddhapura 05.11.2014 в 14:30
  • Lol kids в эти дни с их причудливым jQuery ... объект JSON является частью встроенных объектов Javascript. Не имеет никакого отношения к jQuery. –  devius 13.11.2015 в 19:27
  • Чтобы изменить форму данных загрузки файла jquery, я могу сделать это только с помощью третьего метода, спасибо –  V-SHY 20.01.2016 в 06:49
14

Используйте приведенный ниже код.

    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);
    
ответ дан BITS_Python 08.03.2015 в 13:28
2

Вы можете использовать: jquery.serializeToJSON - Ссылка Он готов работать с формами ASP MVC

    
ответ дан Raphael Monteiro Nunes 01.09.2015 в 16:13
2
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);
    
ответ дан Rifaideen 01.06.2017 в 12:43
1

Современная интерпретация. Babel stage-2 preset требуется для компиляции оператора распространения объектов

// 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')
)
    
ответ дан synthet1c 08.08.2017 в 09:46
0

Вы можете использовать это для создания 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;
});

Чистый JavaScript с FormData:

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);
    
ответ дан Willian Ray 14.10.2017 в 23:23