Web入门之VScode通过javascript连接并插入前端参数到SQLserver数据库（超详细）附常见问题解决

最新推荐文章于 2024-05-29 15:28:15 发布

猫头丁

最新推荐文章于 2024-05-29 15:28:15 发布

阅读量8.7k

点赞数 22

分类专栏： Web开发文章标签： sqlserver web 数据库 html vscode

本文链接：https://blog.csdn.net/weixin_46570668/article/details/113575718

版权

Web开发专栏收录该内容

5 篇文章 15 订阅

订阅专栏

Web入门之VScode通过javascript连接并插入html前端参数到SQLserver数据库（超详细）附常见问题解决

在上周我们将新建的web项目连接上了数据库，可以通过新建查询的方式，用SQL语言增删改查数据库，但是在编写函数的时候还是需要通过js语言获取前端web页面输入的参数，然后进行插入操作，那么今天让我们一起来实现吧。
VScode连接SQL server数据库的详情可以参考之前的文章哦。
https://blog.csdn.net/weixin_46570668/article/details/113257966.

新建数据库

第一步当然是新建一个数据库啦，我们在SQLserver里面新建一个表，就叫test，包含三列，id,name,job，这个可以凭自己的喜好。
代码如下：

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

我们在VScode的项目里新建一个查询看看，是否建立成功。
当当当，非常成功的建立了一个表。
在这里插入图片描述

设计前端界面

接下来我们来设计一下前端界面，因为数据库有三列，那我们就设计三个输入框好了，然后再加一个按钮。如下所示

在这里插入图片描述非常简单的一个界面，每个输入框都有一个默认值，代码如下：

<html>
<head>
    <title>introduction to the DOM</title>
   <script type="text/javascript" src="js/test.js"charset="utf-8"></script>
</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>

编写函数

接下来我们开始写函数啦，其实从上面也可以看出来，我们写了一个名为insertItem(,)的函数在js文件夹下的test.js文件里面。
好，那我们接下来新建一个js文件夹，然后再js文件夹下新建一个test.js文件。

function insertItem(idv, namev, jobv) {
    const newLocal = new ActiveXObject("ADODB.Connection");
    var conn = newLocal; 
    var strdsn = "Driver={SQL Server};SERVER=DESKTOP-U4DC9JE;UID=sa;PWD=;DATABASE=school";
    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();
}

注意一下参数哦
SERVER的意思就是服务器名称，在我们登录的时候，这个蓝底的服务器名称后面的这个就是，直接复制粘贴就好。
UID就是登录名，这里我们填sa。
PWD就是密码。
DATABASE就是我们选择连接的数据库的名称，我们刚刚新建的test表就是建在这个数据库下面的。
在这里插入图片描述

运行效果

好啦，现在我们已经连接好啦，来运行一下试试看。
在这里插入图片描述这里我们选择允许阻止的内容
输出插入成功！
接下来，还是在刚刚的查询里面，我们再查询一下看看效果。
哦豁，插入成功啦，接下来我们可以做更多好玩的事情啦！

可能出现的问题

第一个可能出现的问题是连接不上SQLserver数据库，很有可能是因为new ActiveXObject(“ADODB.Connection”)无法运行，这个问题很大程度上是因为你打开网页时的浏览器不是自带的IE浏览器，解决办法只需要在设置里面将默认浏览器改为IE浏览器即可。

第二个问题就是无法插入，数据类型与数据库类型不符，这个问题也不大，要么在js中修改数据类型，或者也可以直接新建一个符合的表就可以啦。看个人爱好啦。

猫头丁

关注

22
点赞
踩
230

收藏

觉得还不错? 一键收藏
打赏
5
评论
Web入门之VScode通过javascript连接并插入前端参数到SQLserver数据库（超详细）附常见问题解决

Web入门之VScode通过javascript连接并插入SQLserver数据库（超详细）附常见问题解决在上周我们将新建的web项目连接上了数据库，可以通过新建查询的方式，用SQL语言增删改查数据库，但是在编写函数的时候还是需要通过js语言获取前端web页面输入的参数，然后进行插入操作，那么今天让我们一起来实现吧。VScode连接SQL server数据库的详情可以参考之前的文章哦。https://blog.csdn.net/weixin_46570668/article/details/11325
复制链接

扫一扫