如何从SQL Server获取id值替代JS硬编码实现.change事件逻辑？

要把jQuery代码中硬编码的ID替换为从SQL Server查询到的id_scd值，核心是把数据库查询结果传递给前端JavaScript，下面分两种常用场景实现：

方式一：服务器端渲染直接注入数据 #

如果你的页面是服务器端生成的（比如ASP.NET、PHP等），可以在页面渲染阶段就把查询到的ID列表注入到页面中，无需额外异步请求。

1. 后端代码示例（以ASP.NET C#为例） #

后台执行SQL查询，获取id_scd集合并转成JSON格式：

List<string> targetIds = new List<string>();
string connectionString = "你的SQL Server连接字符串";
string query = "SELECT id_scd FROM [DatabaseName].[dbo].[scd]";

using (SqlConnection conn = new SqlConnection(connectionString))
{
    conn.Open();
    using (SqlCommand cmd = new SqlCommand(query, conn))
    {
        using (SqlDataReader reader = cmd.ExecuteReader())
        {
            while (reader.Read())
            {
                targetIds.Add(reader["id_scd"].ToString());
            }
        }
    }
}

// 将集合转成JSON，传递到前端页面
ViewBag.TargetIds = Newtonsoft.Json.JsonConvert.SerializeObject(targetIds);

2. 前端页面使用注入的数据 #

在HTML页面中把后端传递的JSON赋值给全局变量，再修改jQuery逻辑：

<script type="text/javascript">
// 从后端注入的目标ID列表
const targetProductIds = @Html.Raw(ViewBag.TargetIds);

$("#id_product").change(function() {
  // 用数组includes方法替代硬编码的多条件判断
  if (targetProductIds.includes($(this).val())) {
    $('#Div').show();
    $('#Label').show();
  } else {
    $('#Div').hide();
    $('#Label').hide();
  }
});
$("#id_product").trigger("change");
</script>

方式二：前端AJAX异步请求获取数据 #

如果需要动态加载数据（比如页面加载后按需获取），可以通过AJAX请求后端接口拿到ID列表。

1. 后端接口示例（ASP.NET Web API为例） #

编写接口返回id_scd的JSON数组：

[HttpGet]
public IHttpActionResult GetTargetIds()
{
    List<string> targetIds = new List<string>();
    string connectionString = "你的SQL Server连接字符串";
    string query = "SELECT id_scd FROM [DatabaseName].[dbo].[scd]";

    using (SqlConnection conn = new SqlConnection(connectionString))
    {
        conn.Open();
        using (SqlCommand cmd = new SqlCommand(query, conn))
        {
            using (SqlDataReader reader = cmd.ExecuteReader())
            {
                while (reader.Read())
                {
                    targetIds.Add(reader["id_scd"].ToString());
                }
            }
        }
    }
    return Ok(targetIds);
}

2. 前端AJAX请求代码 #

先请求接口拿到数据，再绑定交互逻辑：

<script type="text/javascript">
let targetProductIds = [];

// 异步请求后端接口获取目标ID列表
$.get("/api/你的接口路径/GetTargetIds", function(data) {
    targetProductIds = data;
    // 数据加载完成后绑定事件并触发初始判断
    bindProductChangeEvent();
    $("#id_product").trigger("change");
});

function bindProductChangeEvent() {
    $("#id_product").change(function() {
        if (targetProductIds.includes($(this).val())) {
            $('#Div').show();
            $('#Label').show();
        } else {
            $('#Div').hide();
            $('#Label').hide();
        }
    });
}
</script>

优化提示 #

• 若ID数量较多，可把数组转为Set提升判断性能：const targetIdSet = new Set(targetProductIds);，判断时用targetIdSet.has($(this).val())
• 两种方式都避免了前端硬编码，后续数据库中id_scd变化时无需修改前端代码

内容的提问来源于stack exchange，提问作者jeff Emax SE