生成动态 JSON 对象
本文关键字:对象 JSON 动态 | 更新日期: 2023-09-27 18:31:36
(我希望我能正确地解释这个问题...有一种感觉,我可能会被钉在十字架上...
我有一个动态生成的 HTML 表单,里面填充了选择列表,然后使用 AJAX 保存到数据库中。
选择列表的名称如下:
<select id="slFieldName1"><option value="A">A</option><option value="B">B</option></select>
<select id="slFieldName2"><option value="A">A</option><option value="B">B</option></select>
等。
FieldName1
、FieldName2
等是数据库表上的实际列名 - 我正在使用反射来获取和设置值。
以下是过程:
客户端:
$('#btnSave').click(function (e) {
var sData = {
FieldName1: $('#slFieldName1').val(),
FieldName2: $('#slFieldName2').val()
};
ProjectName.AJAXService.Save(JSON.stringify(sData), function (result) {
// etc
});
});
服务器端:
public class SurveyData
{
public string FieldName1 { get; set; }
public string FieldName1 { get; set; }
}
[WebMethod(true)]
public bool SaveCSSurvey(string sDataJson)
{
SurveyData sData = JsonConvert.DeserializeObject<SurveyData>(sDataJson);
List<string> fieldNames = new List<string>(); // this will be populated with the field names
foreach (var fieldName in fieldNames)
{
s.GetType().GetProperty(fieldName).SetValue(s,
((string)sData.GetType().GetProperty(fieldName).GetValue(sData)));
}
}
我的问题:
如何动态生成要传递给 AJAX 服务的 JSON 对象?即。取而代之的是:
var sData = {
FieldName1: $('#slFieldName1').val(),
FieldName2: $('#slFieldName2').val()
};
。我需要某种包含所有字段名称的 JavaScript 集合,并通过迭代字段名称来创建此对象。
编辑:问题的症结是创建此JSON对象。即使我只是使用 jQuery 遍历每个选择列表,然后通过修剪其"id"属性来获取字段名称,我将如何创建 JSON 对象。
如果您只想提交表单,则可以将其作为表单编码数据提交并使用serialize()
.假定根据表单的要求使用正确的name
属性。
$.post(url, $('#formId').serialize(), function(resp){
// do something with response
});
如果您确实需要如图所示的对象,则可以遍历每个输入并将其名称映射到对象
var formData ={};
$('#formId :input').each(function(){
formData[this.name] = this.value;
});
在 ES5 中,您只能使用简单的赋值来执行此操作,例如在迭代中(而不是作为文本的一部分进行赋值)
var sData = {}
fieldNames = ["FieldName1","FieldName2"]
fieldNames.forEach(function(fieldName) {
sData[fieldName] = $('#sl'+fieldName).val()
})
在 ES6 中,您可以使用更简洁的方式,但这不支持迭代 - 只是积极设置所有字段名称/值
var sData = {
[fieldName] = ...
}
如果要从字段自动生成 JSON 对象。我认为以下示例就是您要查找的。
输出:
Object {FieldName1: "A", FieldName2: "A"}
希望这有帮助。
片段
$('#btnSave').click(function (e) {
var sData = {};
$('select[id^="slFieldName"]').each(function(){
var attribute_name = $(this).attr('id').replace('sl',''); //Removing string 'sl'
sData [attribute_name] = $(this).val();
});
console.log(sData); //Object {FieldName1: "A", FieldName2: "A"}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="slFieldName1"><option value="A">A</option><option value="B">B</option></select>
<select id="slFieldName2"><option value="A">A</option><option value="B">B</option></select>
<button id='btnSave'>Save</button>