能否参数化jQuery Ajax调用实现数据库数据插入？

数据老陈

2026-6-25

问题描述

我原本通过手动赋值实现了AccountMaster表的数据插入，代码运行正常，但如果表包含上百个字段，手动逐个添加字段到对象的操作会极其繁琐。于是我尝试从数据库获取字段列表，循环构建数据对象，却遇到了动态属性赋值的问题——代码将ColName当作固定属性名，无法把数据库列名作为动态属性名赋值到对象中。

原有手动赋值代码

function Insert() {
    var Value = {};
    Value.Id = $("[id*=hdnId]").val();
    Value.AccountName = $("[id*=txtAccountName]").val();
    Value.Catagory = $("[id*=txtCatagory]").val();
    Value.CatagorySr = $("[id*=hdnCatagorySr]").val();
    Value.HeadName = $("[id*=hdnHeadName]").val();
    Value.HeadId = $("[id*=hdnHeadId]").val();
    Value.BalanceSheetSr = $("[id*=hdnBalanceSheetSr]").val();
    Value.AccountTypeName = $("[id*=txtAccountTypeName]").val();
    Value.AccountTypeId = $("[id*=hdnAccountTypeId]").val();
    Value.AccountTypeSr = $("[id*=hdnAccountTypeSr]").val();
    Value.Sr = $("[id*=txtSr]").val();
    Value.AccountCode = $("[id*=hdnAccountCode]").val();
    Value.OpeningBalance = $("[id*=txtOpeningBalance]").val();
    Value.Nature = $("[id*=ddlNature]").val();
    Value.ClosingBalance = $("[id*=txtClosingBalance]").val();
    Value.PrevYearIE = $("[id*=txtPrevYearIE]").val();
    Value.TINNo = $("[id*=txtTINNo]").val();
    Value.GSTNo = $("[id*=txtGSTNo]").val();
    Value.Remark = $("[id*=txtRemark]").val();
    Value.Address = $("[id*=txtAddress]").val();
    Value.EntryBy = '<%=Session["Name"]%>';
    Value.ChangedBy = '<%=Session["Name"]%>';
    $.ajax({
        type: "POST",
        url: "AccountMaster.aspx/InsertUpdate",
        data: '{Value: ' + JSON.stringify(Value) + '}',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (response) {
            alert("Saved Successfully");
        },
        error: function (xhr, status, error) {
            alert(xhr.responseText);
        }
    });
}

尝试的动态赋值代码（存在问题）

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);  //获取页面控件的值
                    Main.ColName = ColValue; // 这里存在问题，无法动态设置属性名
                });
                $.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);
        }
    });
}

C#端GetData方法

[WebMethod]
public static string GetData()
{
    using (SqlCommand Cmd = new SqlCommand())
    {
        using (SqlConnection Con = Connections.Create())
        {
            Cmd.Connection = Con;
            Cmd.CommandText = "GetColumnList_pro".Trim();
            Cmd.CommandType = CommandType.StoredProcedure;
            Cmd.Parameters.AddWithValue("Option", "GetColumnList".Trim());
            Cmd.Parameters.AddWithValue("Table", "DummyTable".Trim());
            using (SqlDataAdapter Adp = new SqlDataAdapter())
            {
                using (DataSet Ds = new DataSet())
                {
                    Con.Open();
                    Adp.SelectCommand = Cmd;
                    Adp.Fill(Ds);
                    return Ds.Geml(); // 注：此处应为Ds.GetXml()，属于笔误
                }
            }
        }
    }
}

现在需要解决的核心问题：正确实现动态属性赋值，完成参数化的jQuery Ajax数据插入操作。

解决方案

1. 修复动态属性赋值问题

在JavaScript中，给对象设置动态属性名不能使用.运算符，必须使用方括号语法。将原有代码中存在问题的赋值行替换为：

Main[ColName] = ColValue;

这样就能将数据库返回的列名作为Main对象的属性名，对应赋值页面控件的取值。

2. 优化GetColumnsValue函数（确保值正确获取）

假设GetColumnsValue是根据列名匹配页面控件的函数，需要确保它能正确对应各类控件（如文本框、隐藏域、下拉框），同时处理EntryBy这类特殊字段，参考实现如下：

function GetColumnsValue(colName, divName) {
    // 匹配txt/hdn/ddl开头的对应控件
    var $control = $(`#${divName} [id*=txt${colName}], #${divName} [id*=hdn${colName}], #${divName} [id*=ddl${colName}]`);
    if ($control.length === 0) {
        // 处理Session赋值的特殊字段
        if (colName === "EntryBy" || colName === "ChangedBy") {
            return '<%=Session["Name"]%>';
        }
        return ""; // 无匹配控件时返回空值
    }
    // 根据控件类型返回对应值
    return $control.is("select") ? $control.val() : $control.val().trim();
}

3. 优化Ajax数据传递

原代码中手动拼接JSON字符串容易出现语法错误，建议直接用JSON.stringify构建完整请求数据：

// 替换原Ajax的data部分
data: JSON.stringify({ MainValues: Main }),

4. C#端代码优化（可选）

先修正原代码中的笔误：Ds.Geml()改为Ds.GetXml()。
若想简化前端解析步骤，可直接返回JSON格式的列名列表，避免XML解析：

[WebMethod]
public static List<string> GetData()
{
    List<string> columnNames = new List<string>();
    using (SqlCommand Cmd = new SqlCommand())
    {
        using (SqlConnection Con = Connections.Create())
        {
            Cmd.Connection = Con;
            Cmd.CommandText = "GetColumnList_pro".Trim();
            Cmd.CommandType = CommandType.StoredProcedure;
            Cmd.Parameters.AddWithValue("Option", "GetColumnList".Trim());
            Cmd.Parameters.AddWithValue("Table", "DummyTable".Trim());
            Con.Open();
            using (SqlDataReader reader = Cmd.ExecuteReader())
            {
                while (reader.Read())
                {
                    columnNames.Add(reader["Column_name"].ToString());
                }
            }
        }
    }
    return columnNames;
}

对应前端成功回调可简化为：

success: function (response) {
    var columnNames = response.d;
    var Main = {};
    $.each(columnNames, function (index, colName) {
        var ColValue = GetColumnsValue(colName, DivName);
        Main[colName] = ColValue;
    });
    // 后续插入的Ajax请求...
}

5. 完整修正后的前端Insert函数

function Insert(FormName, DivName) {
    $.ajax({
        type: "POST",
        url: FormName + ".aspx/GetData",
        data: JSON.stringify({}),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (response) {
            var columnNames = response.d;
            var Main = {};
            $.each(columnNames, function (index, colName) {
                var ColValue = GetColumnsValue(colName, DivName);
                Main[colName] = ColValue;
            });
            $.ajax({
                type: "POST",
                url: FormName + ".aspx/Insert",
                data: JSON.stringify({ MainValues: Main }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function () {
                    alert("保存成功");
                },
                error: function (xhr) {
                    alert(xhr.responseText);
                }
            });
        },
        error: function (xhr) {
            alert(xhr.responseText);
        }
    });
}

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

能否参数化jQuery Ajax调用实现数据库数据插入？

原有手动赋值代码 #

尝试的动态赋值代码（存在问题） #

C#端GetData方法 #

1. 修复动态属性赋值问题 #

2. 优化GetColumnsValue函数（确保值正确获取） #

3. 优化Ajax数据传递 #

4. C#端代码优化（可选） #

5. 完整修正后的前端Insert函数 #