一、来个数据库

在SQL Server里新建一个数据库（或者直接用现有的）进行测试，在 VScode 里连接该数据库。

用VScode连接SQL Server数据库的方法请见我上篇文章【VScode】连接SQL Server数据库

二、建个测试表

鼠标右键 VScode 数据库，选择新建查询（New Query），新建个测试表：

create table test
(id int,
name char(12),
job char(12)
)

执行查询语句，看看是否建立成功：

1	SELECT * FROM test

三、写个小前端

刚建立的数据库有三列（三个属性），我们写三个输入框就行，然后再加个按钮：

<html>
<head>
    <title>introduction to the DOM</title>

</head>

<body>
    <input name="myid" value="01"/>
    <input name="myname" value="name01"/>
    <input name="myjob" value="job01"/>
    <input id="insert" type="button" value="insert" onclick="insertItem(myid.value, myname.value, myjob.value)" />
</body>
</html>

四、整个小函数

把下方 JS 代码插入到刚刚的 HTML 文件中：

function insertItem(idv, namev, jobv) {
    const newLocal = new ActiveXObject("ADODB.Connection");
    var conn = newLocal; 
    var strdsn = "Driver={SQL Server};SERVER=服务器名称;UID=登录名;PWD=密码;DATABASE=数据库名称";
    try {
        conn.Open(strdsn);
    }
    catch (e) {
        alert(e.message);
    }
    var id=Number(idv);
    alert(typeof(id));
    var sql = "INSERT INTO test VALUES(" + idv + ", '" + namev + "', '" + jobv + "')";
    try {
        conn.execute(sql);
        alert("successfully inserted !");
    }
    catch (e) {
        alert(e.description);
    }
    sql.close();
    conn.close();
}

上方各参数改一下，各参数可在SQL Server中查看：

SERVER：服务器名称，如DESKTOP-U4DC9JE
UID：登录名，我们填sa就行
PWD：密码
DATABASE：刚刚那个数据库的名称

五、插条小数据

在浏览器中打开刚刚写的页面，输入数据后点击按钮插入，如果有弹窗提示插入成功，说明咱成功了已经。除了“insert插入”按钮之外，“select查询”、“update更新”、“delete删除”等按钮可以根据需要，自己写前端和 JavaScript 语句。

遇到的问题

由于我的默认浏览器是Microsoft Edge，打开页面后点击按钮后没反应并且浏览器控制台报错ReferenceError: myid is not defined at HTMLInputElement.onclick (test.html:11)。经了解应该是 JavaScript 使用 ActiveXObject 时的报错。

然后我又试了试很久没用过的、快被我遗忘的 IE浏览器，点击按钮后好像提示的是“IE浏览器已限制此网页运行脚本或 Active 插件。”直接点击提示框右边的“允许禁止的插件”，或者经过一顿操作（设置->Internet选项->安全->自定义级别->找到设置中的：ActiveX控件和插件->启用：对未标记为安全执行脚本的ActiveX控件初始化并执行脚本），允许IE浏览器使用后，再插入数据就能正常用了。