如何在jQuery Ajax调用中动态插入输入数据？

我需要在jQuery Ajax调用中动态插入输入数据。手动逐个为Main对象添加属性（如Main.Id = GetColumnsValue("Id", DivName)）的方式可正常执行，但通过从数据库获取列名、循环动态为Main对象添加对应属性及值时，代码无法正常工作。

相关代码 #

Insert函数

function Insert(FormName, DivName) {
    $.ajax({
        type: "POST",
        url: "" + FormName + ".aspx/GetData",
        data: '{}',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (response) {
            var xmlDoc = $.parseXML(response.d);
            var xml = $(xmlDoc);
            var Records = xml.find("Table");
            if (Records.length > 0) {
                var Main = {};
                $.each(Records, function () {
                    var record = $(this);
                    var ColName = record.find("Column_name").text();   //从数据库获取列名
                    var ColValue = GetColumnsValue(ColName, DivName);  //获取Web表单中的列值
                    Main.ColName = ColValue; // 此行无法实现动态赋值
                });
                // 以下手动逐个添加属性的方式可正常运行
                //Main.Id = GetColumnsValue("Id", DivName);
                //Main.StudentName = GetColumnsValue("StudentName", DivName);
                //Main.RegNo = GetColumnsValue("RegNo", DivName);
                //Main.Marks = GetColumnsValue("Marks", DivName);
                $.ajax({
                    type: "POST",
                    url: "" + FormName + ".aspx/Insert",
                    data: "{MainValues: " + JSON.stringify(Main) + "}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (response) {

                    },
                    error: function (xhr, status, error) {
                        alert(xhr.responseText);
                    }
                }).done(function () {
                });
            }
        },
        error: function (d) {
            alert(d.responseText);
        }
    });
}

GetColumnsValue函数

function GetColumnsValue(ColumnName, DivName) {
    var all = document.getElementById(DivName).getElementsByTagName("*");
    var controlid;
    var Found, ColumnValue;
    for (var i = 0; i < all.length; i++) {
        Found = "N";
        controlid = all[i].id;
        if (controlid.length > 0) {
            var CtrlName = $("[id*=" + controlid + "]").attr('id');
            if (CtrlName.substr(CtrlName.length - 3, 3) != "_NI") {
                switch (CtrlName.substr(0, 3)) {
                    case "txt":
                    case "lbl":
                    case "cmb":
                    case "dte":
                        var c = CtrlName.substr(3, CtrlName.length - 6);
                        if (c == ColumnName) {
                            ColumnValue = $("[id*=" + CtrlName + "]").val();
                            Found = "Y";
                        }
                        break;

                    case "chk":
                        var c = CtrlName.substr(3, CtrlName.length - 6);
                        if (c == ColumnName) {
                            if ($("[id*=" + CtrlName + "]").prop('checked') == true)
                                ColumnValue = "Y";
                            else
                                ColumnValue = "N";
                            Found = "Y";
                        }

                        break;
                }
                if (Found == "Y")
                    break;
            }
        }
    }
    if (Found == "N")
        return "N";
    else
        return ColumnValue;
}

问题原因及解决方法 #

核心问题 #

Main.ColName = ColValue这行代码存在语法逻辑错误：JavaScript中，点号.后的内容会被当作字面量属性名，而非变量。所以循环中每次都是给Main添加一个名为ColName的属性，不断覆盖之前的值，最终Main里只有这一个属性，而非预期的多个列名属性。

修复方案 #

改用方括号语法实现动态属性赋值：

Main[ColName] = ColValue;

这种写法会把变量ColName的实际取值作为属性名，从而为Main对象动态添加对应列名的属性和值。

额外验证建议 #

• 循环结束后添加console.log(Main)，在浏览器控制台查看对象结构，确认属性是否正确添加。
• 检查ColName获取到的列名是否和手动添加时完全一致（包括大小写、空格等），避免因名称不匹配导致赋值无效。

内容的提问来源于stack exchange，提问作者Shaiwal Tripathi