serialisierte Form Converting Daten zu JSON-Objekt

Question

ich ein cshtml wie die folgenden

habe

@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"))    
} 

In meinem Javascript (in einer separaten JavaScript-Datei), ich versuche, diese Form zu serialisiert und in ein JSON-Objekt konvertieren .

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

druckt

FloorPlan.Name=Test&FloorPlan.GroupId=15 

Und

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

gibt mir:

Ich habe versucht, dies zu tun

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

Aber ich bekomme diese Fehlermeldung:

Uncaught SyntaxError: Unexpected token o 

Answer 1

Ändern Sie Ihre Aussage

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

mit

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

oder

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

Answer 2

Verwenden Sie den folgenden Code !!!

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

Answer 3

können Sie verwenden: jquery.serializeToJSON-https://github.com/raphaelm22/jquery.serializeToJSON Sein bereit ist, mit Formen ASP MVC diese Funktion

Answer 4

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

return jsonObj; 
} 

Gebrauch zu arbeiten. Dies funktioniert nur mit jquery.

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

var properJsonObj = jQFormSerializeArrToJson(serializedArr); 

Answer 5

Eine moderne Interpretation. babel Stufe-2 Preset erforderlich, um das Objekt Spread Operator

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

Answer 6

diese Weise können Sie für machen eine json mit allen Bereichen der Form zu kompilieren.

JQuery Beispiel:

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

reine JavaScript mit 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);