J'ai un cshtml comme celui-ci
@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"))
}
Dans mon javascript (dans un fichier javascript séparé), j'essaie de sérialiser ce formulaire et de le convertir en objet JSON.
var formData = $("#floorplan-form").serialize();
console.info(formData);
imprime
FloorPlan.Name=Test&FloorPlan.GroupId=15
Et
var formData = $("#floorplan-form").serializeArray();
console.info(formData);
donne moi:
J'ai essayé de faire ça
var formData = JSON.parse($("#floorplan-form").serializeArray());
Mais je reçois cette erreur:
Uncaught SyntaxError: Unexpected token o
Changer votre déclaration
var formData = JSON.parse($("#floorplan-form").serializeArray());
avec
var formData = JSON.stringify(jQuery('#frm').serializeArray()); // store json string
ou
var formData = JSON.parse(JSON.stringify(jQuery('#frm').serializeArray())) // store json object
Utilisez le code ci-dessous !!!
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);
function jQFormSerializeArrToJson(formSerializeArr){
var jsonObj = {};
jQuery.map( formSerializeArr, function( n, i ) {
jsonObj[n.name] = n.value;
});
return jsonObj;
}
Utilisez cette fonction. Cela fonctionnera uniquement avec jQuery.
var serializedArr = $("#floorplan-form").serializeArray();
var properJsonObj = jQFormSerializeArrToJson(serializedArr);
Vous pouvez l'utiliser pour créer un JSON avec tous les champs du formulaire.
Exemple 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 pur avec 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);
Une interprétation moderne. le préréglage babel stage-2 est nécessaire pour compiler l'opérateur d'étalement d'objet
// 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')
)
Vous pouvez utiliser: jquery.serializeToJSON - https://github.com/raphaelm22/jquery.serializeToJSON Il est prêt à travailler avec des formulaires ASP MVC