生成动态 JSON 对象

Generating a dynamic JSON object

本文关键字：对象 JSON 动态      更新时间：2023-09-26

（我希望我能正确地解释这个问题...有一种感觉，我可能会被钉在十字架上...

我有一个动态生成的 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>

相关文章：