Question

（我希望我能正确解释这个问题......感觉我可能被钉在十字架上......）

我有一个动态生成的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对象？ IE浏览器。而不是这个：

var sData = {
    FieldName1: $('#slFieldName1').val(),
    FieldName2: $('#slFieldName2').val()
};

...我需要有一些包含所有字段名称的JavaScript集合，并通过迭代字段名称来创建此对象。

编辑：问题的症结在于创建此JSON对象。即使我只是使用jQuery迭代每个选择列表，然后通过修剪它的“id”来获取字段名称。属性，我将如何创建JSON对象。

Answer 1

如果您只想提交表单，则可以将其作为表单编码数据提交并使用serialize()。假设使用表单所需的正确name属性。

$.post(url, $('#formId').serialize(), function(resp){
    // do something with response
});

如果你真的需要如图所示的那个对象，你可以遍历每个输入并将它的名字映射到对象

var formData ={};

$('#formId :input').each(function(){
   formData[this.name] = this.value;
});

Answer 2

在ES5中，你只能通过简单的赋值来做到这一点，例如在迭代中（而不是作为文字的一部分）

var sData = {}
fieldNames = ["FieldName1","FieldName2"]
fieldNames.forEach(function(fieldName) {
  sData[fieldName] = $('#sl'+fieldName).val()
})

在ES6中，您可以使用更简洁的方式，但这不支持迭代 - 只是积极地设置所有字段名称/值

var sData =  {
   [fieldName] = ...

}

Answer 3

如果要从字段自动生成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>

生成动态JSON对象

3 个答案:

段